主题自定义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:

    抢个沙发!

  2. Kars says:

    太变态了!

  3. MOPVHS says:

    :evil: 第三第三...

  4. neoear says:

    KILL IE6?难啊,先让国内网银不支持IE6再说

    1. zwwooooo says:

      @neoear 话说工行的有些类型的u盾不支持xp以上系统 - -

  5. 万戈 says:

    你太帅了,我也碰到过这个问题,后来用overflow:hidden;粗糙解决了。。。还是你这个好

    1. zwwooooo says:

      @万戈 overflow:hidden;不能滚动的确不像贴代码,呵呵,看来虽然只是简单一个padding-bottom搞定的文章还是有用的。

  6. 益酷网 says:

    今天彻底把ie的滚动解决了,你实在是太帅了。

    1. zwwooooo says:

      @益酷网 有没有美女啊 :mrgreen:

  7. QiQBoY says:

    ..没留意过这个,我一直用wlw的代码插件。。 :!:

    1. zwwooooo says:

      @QiQBoY 有代码插件就不用折腾这个了 :smile:

  8. A.shun says:

    残念IE6,我那主题越改,IE6下越杯具。。不管了 :evil:

    1. zwwooooo says:

      @A.shun IE6很烦的,现在访问我这的用IE6排第二,第一是FF,第三是Chrome,第四是IE7/8/OP/Sa/马桶/世界/……

  9. yun77op says:

    :arrow: 还以为什么古怪的hack方法;另一方面,我的态度是,叫他们自己为落后的ie买单

    1. zwwooooo says:

      @yun77op 无聊的文章请忽视,我已经开始叫他们自己买单了,看我这主题在ie6下是方角世界

  10. Bee君 says:

    颜色变深了?夜间模式?....

    1. zwwooooo says:

      @Bee君 什么颜色?主题颜色?

  11. 苏扬 says:

    我讨厌IE6的原因是因为他不支持中文域名 哈哈!

    1. zwwooooo says:

      @苏扬 我对中文域名不感冒,对国内现在的网络环境失望

  12. Vicia says:

    我很佩服一边骂IE6该死,一边还能耐心为IE6用户解决问题的人。如果是我,直接无视IE6。 :cool:

    1. zwwooooo says:

      @Vicia 其实我是骂ie6用户,ie6本身没有错,我解决是因为刚好在折腾主题无意想到的。

    2. Vicia says:

      @zwwooooo 那应该骂微软,生出IE6来,还让它一直存在。 :razz:

    3. zwwooooo says:

      @Vicia 诶~不能这样吧,人家ie6以前也是个传说,况且没有人逼你用windows和ie6 :mrgreen:

  13. 郑永 says:

    我好像遇到过很多次复制不了的,哈哈,然后去代码里面看,居然<号是html代码,真是麻烦啊!!

    1. zwwooooo says:

      @郑永 你是说我这的复制出现<号是html代码?复制代码最好直接把代码复制到文本编辑软件

  14. Tony says:

    好久没走动了!来看看兄弟!

    1. zwwooooo says:

      @Tony 记得要多走动

  15. GEZ鸽子 says:

    无视IE6,别再支持IE6了!不然还是有人恋恋不舍的不升级!

    1. zwwooooo says:

      @GEZ鸽子 我的主题在IE6下会有烦人的提示窗口 :grin:

  16. andy says:

    欲炼CSS,必先自宫IE.慢慢折腾吧,据说如果用IE练习CSS,必然会走火入魔,最吐血身亡。。。 :lol:

    1. zwwooooo says:

      @andy 我现在的原则是能简单解决就解决,如果太复杂就无视ie6

  17. Timothy says:

    没法,现在使用WinXP+IE6的太多了。

    1. zwwooooo says:

      @Timothy 国内相对比较多,国外很少了

  18. 阿修 says:

    我已经决定用插件了~~

    1. zwwooooo says:

      @阿修 我早决定不用插件了 :mrgreen:

  19. 疾风 says:

    pre好像用的比较少

    1. zwwooooo says:

      @疾风 我就常用,因为我没有使用代码高亮插件

  20. 超人 says:

    css帝。哈哈

发表评论

昵称 *

网址

B em del U Link Code Quote