IE6的overflow:auto的垂直滚动条

Posted By: agon,  Published:September 12th, 2008   

没有用高亮插件的人几乎都用<pre>来显示源代码,为了不让代码撑破布局,都用了overflow:auto,当超过宽度时产生水平滚动条。在FF下一切显示正常,可在ie6下会跟着产生一个垂直滚动条,行数如果少,代码被框在一个很窄的框里,看起来很不方便,用overflow-x:auto可以只显示水平滚动条,但在ie6和ie7下,不管行数多少,最后一行总是这样:
如图所示最后一行总是被遮盖。这里提供了一个好办法,来解决这个问题,修改模板css的pre,代码如下:

pre {
 overflow-x: auto;/*只显示水平滚动轴*/
  width:95%;/*这里一定要加个宽度,要不不会auto */
}
* html pre {
  padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 19 : 4);
  /*如果是ie6,加了一个js判断,scrollWidth是实际内容的宽度,offset是显示的宽度*/
}

不过我的解决办法是:

word-wrap:break-word;word-break:break-all;overflow:auto;/*前两个是在IE下单词内断行,然后其他浏览器自动产生水平滚动条*/

我还在用ie6,好像很少人关心ie6的显示问题了,该扔进垃圾堆里了。

1条回复

添加你的回复

  1. 你的方法更方便。谢谢了

你的回复