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

上次那篇《如何避免页面被长代码撑坏》虽然解决了问题,但是效果不是很理想,后来蓝蓝小雪同学提供了一个另外一个解决方法——修改 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 个免费翻墙工具

9 条评论

  1. 蓝蓝小雪
    发表于2009年05月16日 12:20 下午 | 永久链接

    代码来自于http://aoao.org.cn/的CSS中。max-height: 180px; 是定义的最大高度………有些浏览器不支持。

  2. 金融危机的影响
    发表于2009年05月16日 12:21 下午 | 永久链接

    学习了 多谢塞

  3. Young
    发表于2009年05月16日 12:53 下午 | 永久链接

    @蓝蓝小雪: 哈哈,虽然不能完美支持 IE6,但是效果也还过得去,不失为一个好方法。不过想必很少人会用到那么长的代码。

  4. 发表于2009年05月16日 2:51 下午 | 永久链接

    贴代码挺麻烦,除非用插件。

  5. 蓝蓝小雪
    发表于2009年05月16日 3:09 下午 | 永久链接

    @Young: 参考下这个 PARANDROID

  6. Young
    发表于2009年05月17日 11:32 下午 | 永久链接

    @蓝蓝小雪:谢谢,说不准以后用得着。

  7. Cms系统
    发表于2009年05月30日 9:16 下午 | 永久链接

    很不错呢,向您学习

  8. phy
    发表于2009年08月7日 1:50 下午 | 永久链接

    这个行吗?

    #a {height:auto !important; min-height:400px;}

  9. Young
    发表于2009年08月7日 8:03 下午 | 永久链接

    @phy 不知道,没有试过,你试过了吗?现在我用插件解决了。