南芝 – 我才12岁（孤独、快乐的生活在自己的世界里）

首先，我们先看一下例子：

HTML 代码：

<pre>
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
		oldonload();
		func();
		}
	}
}

function tagCloud() {
	if(document.getElementById("tags_cloud")) {
		var tags = document.getElementById("tags_cloud");
        var tagLinks = tags.getElementsByTagName("a");
        var styles = new Array();
        styles[0] = new Array("#FF0000","FFCC00","FF9900","#0099FF","#999999"); //设定字体的颜色随机的种类
        styles[1] = new Array("12px","14px","16px"); //设定字体的大小随机的种类
        styles[2] = new Array("400","500","600","700"); //设定字体的粗细随机的种类
        for(var i=0; i<tagLinks.length; i++) {
        	tagLinks[i].style.color = styles[0][Math.floor(styles[0].length*Math.random())]; //设定字体的颜色
            tagLinks[i].style.fontSize = styles[1][Math.floor(styles[1].length*Math.random())]; //设定字体的大小
            tagLinks[i].style.fontWeight = styles[2][Math.floor(styles[2].length*Math.random())]; //设定字体的粗细
        }
    }
}

addLoadEvent(tagCloud);</pre>

CSS 代码：

pre { border:1px solid #0066FF; background:#F0F0F0; overflow:auto; padding:5px; width:400px; height:400px;}

这里，pre 的宽度和高度固定，所有浏览器的宽度和高度表现是统一的，滚动条内含在宽度和高度里边，带上滚动条和边框，我们所看到的宽度和高度都是 412px。可以在这里看到这一个版本的表现。

现在，让我们改变它的样式，将高度去掉。

CSS 代码：

pre { border:1px solid #0066FF; background:#F0F0F0; overflow:auto; padding:5px; width:400px;}

在 IE 浏览器下的表现是：

在其他现代浏览器下的表现是：

可以在这里看到展示，那么为什么会出现这种情况呢？我们再修改一下 CSS，将 pre 的宽度调大：

CSS 代码：

pre { border:1px solid #0066FF; background:#F0F0F0; overflow:auto; padding:5px; width:950px;}

所有浏览器的水平、垂直滚动条都消失了，可以在这里看到展示。也就是说，当出现水平滚动条的时候，IE 浏览器会同时出现垂直滚动条，而在其他现代浏览器上不会出现。但是这是什么原因呢？我推断可能的原因是：在 IE 下，当水平滚动条出现的时候，它会叠加在当前的高度内，造成垂直方向上的东西不能完全展现，以至于出现垂直滚动条，而在其他现代浏览器下，当水平滚动条出现时，是在当前的内容下添加的滚动条，没有占用已有的内容，不会对垂直方向上的显示造成影响，所以，没有出现垂直滚动条。不知道我的推测是否正确，期待高人的指点。

那么现在怎么解决 IE 下的滚动条呢，感觉看着别扭。如上所说，所需要做的仅仅是在 IE 浏览器下，当水平滚动条出现的时候将垂直滚动条隐藏，同时增加 pre 的下padding，这样子，就不会造成内容被隐藏，同时也去掉了垂直滚动条。我们使用 JS 实现我们想要的结果。

改进后的 CSS 代码：

pre { border:1px solid #0066FF; background:#F0F0F0; overflow:auto; padding:5px; width:400px;}
pre.specialPre { padding-bottom:20px; overflow-y:hidden;}

JavaScript 代码：

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
		oldonload();
		func();
		}
	}
}

function preClass() {
	if(document.all && document.getElementsByTagName) {
		var pres = document.getElementsByTagName("pre");
		for(var i=0; i<pres.length; i++) {
			if(pres[i].scrollWidth > 410) {
				pres[i].className = "specialPre";
			}
		}
    }
}

addLoadEvent(preClass);

这样子，就解决了在 IE 浏览器下的垂直滚动条的问题，可以在这里看到展示。

注：文中的其他现代浏览器指的是：Opera、Firefox、Safari，所测试的版本分别为Opera 9.51、Firefox 3.0.1、Safari 3.1.1 。

标签： Firefox, IE, Opera, pre, Safari, 滚动条

这篇文章发布于 2008年07月28日，星期一，17:29，归类于 CSS, JavaScript。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。