Old

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

先骂一下:该死的 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

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25128

65 comments

  1. 老饕 老饕 Firefox 3 Firefox 3 Windows 7 Windows 7

    抢个沙发!

    沙发
  2. 1Kars Kars Flock 2 Flock 2 Windows XP Windows XP

    太变态了!

    板凳
  3. MOPVHS MOPVHS Google Chrome 4 Google Chrome 4 Windows XP Windows XP

    :evil: 第三第三...

    地板
  4. ......
  5. 皓辰 皓辰 360Safe Explorer 360Safe Explorer Windows XP Windows XP

    真想X了IE6

    21楼
  6. 集趣 集趣 Internet Explorer 6 Internet Explorer 6 Windows XP Windows XP

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

    22楼
  7. 易搜购 易搜购 Firefox 3 Firefox 3 Windows 7 Windows 7

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

    23楼
  8. 鲍捷 鲍捷 Google Chrome 4 Google Chrome 4 Windows XP Windows XP

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

    24楼
    • zwwooooo zwwooooo Firefox 3 Firefox 3 Windows 7 Windows 7

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

  9. 南京蚂蚁搬家公司 南京蚂蚁搬家公司 Google Chrome 4 Google Chrome 4 Windows XP Windows XP

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

    25楼
  10. 朵未 朵未 Firefox 3 Firefox 3 Windows XP Windows XP

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

    26楼
  11. 真好网 真好网 Opera IBIS 10 Opera IBIS 10 Windows 7 Windows 7

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

    27楼
  12. 纯粹 纯粹 Opera 10 Opera 10 Windows XP Windows XP

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

    28楼
  13. evlos evlos Google Chrome 5 Google Chrome 5 Windows XP Windows XP

    万恶的 IE6 ~

    29楼
  14. lin lin Firefox 3 Firefox 3 Windows XP Windows XP

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

    30楼
    • zwwooooo zwwooooo Opera 10 Opera 10 Windows 7 Windows 7

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

    • lin lin Firefox 3 Firefox 3 Windows XP Windows XP

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

    • zwwooooo zwwooooo Opera 10 Opera 10 Windows 7 Windows 7

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

    • lin lin Firefox 3 Firefox 3 Windows XP Windows XP

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

    • zwwooooo zwwooooo Opera 10 Opera 10 Windows 7 Windows 7

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

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

  15. 沫夏 沫夏 Internet Explorer 8 Internet Explorer 8 Windows XP Windows XP

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

    31楼
    • zwwooooo zwwooooo Firefox 7 Firefox 7 Windows 7 Windows 7

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

  16. Dick_Wu Dick_Wu Google Chrome 17 Google Chrome 17 Windows XP Windows XP

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

    32楼
  17. Eric Eric Firefox 41 Firefox 41 Windows 10 Windows 10

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

    33楼
    • zwwooooo zwwooooo Firefox 42 Firefox 42 Windows 10 Windows 10

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

Leave a Reply