我正在使用HTML5 Boilerplate并添加了渐变背景,包括用于IE的Microsoft过滤器。在IE8中,当内容大于视口水平(垂直工作正常)时,会出现一个滚动条,但它处于非活动状态,并且视口之外的内容无法访问。
(简化)HTML:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Gradient/Horizontal Scrollbar IE8 ~ HTML5 BoilerPlate test</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="topbar">
This is a line of text to test the horizontal scrollbar when used with MS filter gradient background.
</div>
</body>
</html>
CSS:
body {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#3c3c3c');
background: #3c3c3c -webkit-gradient(linear, left top, left bottom,
from(#ffffff), to(#3c3c3c) ) no-repeat; /* for webkit browsers */
background: #3c3c3c -moz-linear-gradient(top, #ffffff, #3c3c3c) no-repeat; /* for FireFox 3.6+ */
}
#topbar {
width: 692px;
height: 80px;
background-color: #ccc;
}
答案 0 :(得分:0)
即使没有H5BP,我也能重现这一点。 http://jsfiddle.net/nimbu/rnqsW/show/
我的建议是不使用过滤器:/并且只使用纯色用于不支持的浏览器。此外,您应该为渐变添加-o-和-ms-,因为Opera和IE10都支持它们。