IE 内边距包含 overflow 滚动条高度的解决方法

/

在我的文章中经常会包含一些代码块,用于呈现的主要 css 代码如下:

pre {
	border: 1px solid #ccc; 
	padding: 10px 15px; 
	overflow-x: auto; 
	overflow-y:hidden;
}

在 firefox 下显示正常,在 IE 8 以下内边距会包含 overflow 滚动条高度,非常难看。

IE 内边距包含 overflow 滚动条高度的解决方法

解决的方法有2种:

第一种方法利用 IE 8 以前的版本支持 css expression,IE 8 及其以后的版本不支持的特性,添加如下代码:

padding-bottom: expression(this.scrollWidth > this.offsetWidth ? "29px" : "10px");

当出现滚动条时,padding-bottom 的值为29px;没有滚动条时,还是10px。

第二种方法采用 javascript:

<script type='text/javascript'>
(function ($) {
  $.fn.fixOverflow = function () {
    if ($.browser.msie && $.browser.version < 8) {
      return this.each(function () {
        if (this.scrollWidth > this.offsetWidth) {
          $(this).css({ 'padding-bottom' : '29px' });
        }
      });            
    } else {
      return this;
    }
  };
})(jQuery);
</script>
<script type="text/javascript">jQuery(document).ready(function ($){$("pre").fixOverflow();});</script>

Comments