再说如何避免页面被长代码撑坏

想要一个既简单又稳定而且还便宜的云服务器吗?那就选择 DigitalOcean 吧,仅需 5 块钱一个月,现在注册还可以马上获赠 10 美元。

上次那篇《如何避免页面被长代码撑坏》虽然解决了问题,但是效果不是很理想,后来蓝蓝小雪同学提供了一个另外一个解决方法——修改 CSS 文件,具体操作如下:

一、修改 WordPress 主题的 Style.css 文件

打开 Style.css 文件并在适当的位置插入以下代码:

pre code{margin: 4px 0;border: 1px #ccc solid;border-bottom-width: 3px;line-height: 1.3em;padding: 4px 8px;max-height: 180px;overflow: auto;font-family: Consolas,”Courier New”, Courier, monospace;background-color: #f8f8f8;display:block;text-wrap: suppress;font-size:12pt;color:black;}

相关数字可以更改,不过我只改红色部分。

二、插入长代码

在需要插入长代码的地方先插入以下代码:

<pre><code> codes go here </code></pre>

然后在上面的红色部分插入您的代码。

但是,这种方法并不适合精博目前这个 WordPress 主题,因为测试结果并不理想:

1. 在 FireFox 浏览器下的效果——不正常:

高度并没有达到在 Style.css 文件中设置好的 180px,只有一行,只能横向滚动。

pre code in ff

2. 在 IE6 浏览器下的效果——不正常:

pre-code-in-ie6

高度和在 FireFox 浏览器下的一样,但是没有文本框,代码撑破页面。

3. 在 IE7 浏览器下的效果——正常:

pre-code-in-ie7

高度刚好 180px 。

后来,我把 “pre code” 改为 “code”,把 <pre> 和 </pre> 删掉, 测试结果好了一点:

1. 在 IE7 和 FireFox 浏览器下的效果正常:

如上面第三个图

2. 在 IE6 浏览器下的效果不正常:

pre-code-in-ie7

文本框的高度超出 180px,没有滚动效果。

蓝蓝小雪同学提供的代码是有效的,之所以使用 <pre> 标签会乱,应该是因为精博 WordPress 主题的问题。目前精品博客的图片在 Firefox 下可以正常显示,但是在 IE 下却不行,本来是该在左边的,到了 IE 就跑到右边了——shirtha 同学曾对这个问题表示感兴趣,并想我截图给她看。不过之前在中间或者在右边的图片我都放到左边了,所以暂时满足不了 shirtha 同学的愿望了,下次吧,等我找到解决方法的时候。

从买域名买空间安装 WordPress 开始,我就知道做一个独立博客就意味着要不断地折腾,您或许不一定和我一样折腾代码,不过可能会折腾某个插件或者主题之类的。

喜欢就分享!
发布在博客技术 已有标签 , , . 将该链接存入书签
  • :: 《100 个免费翻墙工具》免费电子书

    100 个免费翻墙工具