主题自定义pre - 解决在IE6下的x轴滚动条问题

» 2010-04-04 65条评论

先骂一下:该死的 IE6 你为啥还不去死?微软都判你死刑了!

IE6 委屈到:我冤枉啊!我委屈啊!我也想死,我也想早死早升天啊,可是中国那么多用户不让我死啊!特别是那些 XP 用户,一 XP 就只想到我……一 XP 就用我,天下美女那么多,为啥就只 XP 我……

言归正传,我的博客没有使用代码高亮相关插件,我贴代码都是用 <pre></pre> 括起来,也就是说主要靠 WordPress 主题的 css 来定义 pre 样式,然后代码是用在线生成的 html 代码来实现代码高亮,其实就是用<span>啦,哈。

我目前所用主题 zBench 的 pre 的 css 如下:

.post .entry pre{font-size:12px;
width:95%;
line-height:16px;
overflow:auto;
font-family:"Courier New", FixedSys;color:#555;
background:#fafafa;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:15px solid #ccc;
border-right:1px solid #ccc;
padding:0 5px;
margin:0 0 20px;}

这样设置在 Firefox、Chrome、Opera、IE7/8 下单行代码都能正常显示如下图:

但在非常年老的 IE6 下竟然是这样的:

早就有 IE6 用户提意见了(一般是《铁血联盟2 v1.13》玩家),说看不了里面的内容,也 CP 不了里面的代码

我曾经试了几个 css 属性都没解决,反正我对 IE6 怕怕,而且也希望 IE6 用户尽快抛弃 IE6,后来就忘记了

前几天无聊写了篇《Chrome、Firefox 用户文件挪移大法》,那文章里面的 pre x 轴滚动条就像一条虫虫压在代码上 - - ,于是决定还是解决一下,这次分析一下,应该是高度问题,但又不能在 pre 定义 height 属性,这 IE6 难道是把 x 轴的高度也算在 height 的,所以想想应该设置一下 padding 的下边距就行,结果真的和想想一样

只是把上面 css 中的 padding 改为:

padding:0 5px 16px;

就行了。

这样 IE6 下的效果如下图:(竟然出现 y 轴 - - 虽然可以用 IE6 专用属性限制,还是算了)

而 Firefox、Chrome、Opera、IE7/8 下则变成下图那样:

就这样,凑合吧

zww
or
oooo

“主题自定义pre - 解决在IE6下的x轴滚动条问题”有65条评论

  1. 皓辰 says:

    真想X了IE6

    1. zwwooooo says:

      @皓辰 大家 X 才是真的 X

  2. 集趣 says:

    不过目前还是有很多人使用IE6,只要保证主题在各大浏览器中能正常显示就好了

  3. 易搜购 says:

    ie 6再过一年就没有了,win7系统在普及 ,硬件快跟上了

    1. zwwooooo says:

      @易搜购 w7的确不错,但很多网银的u盾竟然还不支持w7

  4. 鲍捷 says:

    放弃ie6吧,现在这么多浏览器,哎,期待标准出台吧

    1. zwwooooo says:

      @鲍捷 我也想放弃,但目前博客访客使用ie6的占第二位,起码要让网页正常显示,样式可以丑点

  5. 支持一下,貌似目前我还没有需求

  6. 朵未 says:

    把网吧的IE6都升级了就OK了。 :grin:

    1. zwwooooo says:

      @朵未 的确,呵呵

  7. 真好网 says:

    出现那个滚动条,看上去不太舒服。

    1. zwwooooo says:

      @真好网 代码本来就是这样的,有滚动条才能方便看代码。

  8. 纯粹 says:

    其实微软只要在更新包里包含IE升级就OK了,很多人看都不看更新内容就更新系统了 :mrgreen:

    1. zwwooooo says:

      @纯粹 写成“高危漏洞” :mrgreen:

  9. evlos says:

    万恶的 IE6 ~

  10. lin says:

    可以写成 *padding:0 5px 16px; “*”号是专门针对IE6的hack。

    1. zwwooooo says:

      @lin 这个知道,但我是尽量不用hack的,用hack多通不过css认证的。

    2. lin says:

      @zwwooooo 呵呵,不要被验证这东西限制住啊。

    3. zwwooooo says:

      @lin 没有限制,代码能标准就标准,既然不需要就尽量不去用,我的主题css基本是找不到ie6hack的,这也是个人喜好 :mrgreen: 而且我现在开始不太注重ie6了,不然圆角我就用图片了,呵呵

    4. lin says:

      @zwwooooo 记得有个办法可以让里的代码自动换行的,我想想……你参考下这篇文章吧http://paranimage.com/preformated-pre-text-wrap/

    5. zwwooooo says:

      @lin 哈,你真是太有心了,我没说要解决滚动条,滚动条是我特意加上去的,我是要解决ie6下滚动条盖住“只有一行代码”的问题,呵呵。

      文章写的是简单的解决方法。

  11. 沫夏 says:

    这种代码高亮的效果的却很好,但是不显示行号是一大缺陷,有什么办法显示行号不?

    1. zwwooooo says:

      @沫夏
      这个不算是代码高亮,只是用html来实现而已。行号什么的用插件吧。

  12. Dick_Wu says:

    玩铁血联盟的大叔们都好古老。。。。我算是铁血联盟玩家里面婴儿级别的了。。。

    1. zwwooooo says:

      @Dick_Wu
      老玩家基本在3x,有些老玩家已经4x了

  13. Eric says:

    想知道Z大在线生成html的工具是啥呢?给推荐推荐吧,用插件用够了,加载太多js了,影响速度,小站伤不起啊

    1. zwwooooo says:

      @Eric 很少用了,用的是 st3 的插件,你搜搜我写的 Sublime Text

回复给 纯粹 ¬
取消回复

昵称 *

网址

B em del U Link Code Quote