精品博客

Posted: 15 May 2009 07:44 AM PDT

上次那篇《如何避免页面被长代码撑坏》虽然解决了问题，但是效果不是很理想，后来蓝蓝小雪同学提供了一个另外一个解决方法——修改 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 开始，我就知道做一个独立博客就意味着要不断地折腾，您或许不一定和我一样折腾代码，不过可能会折腾某个插件或者主题之类的。