先骂一下：该死的 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 下则变成下图那样：

就这样，凑合吧

• 本文标题：主题自定义pre - 解决在IE6下的x轴滚动条问题
• 本文链接：https://zww.me/archives/25128
• 发布时间：2010年04月04日 19:30
• 版权声明：除非注明，文章均为 zwwooooo 原创，转载请以链接形式标明本文地址！