Microsoft 渐变过滤器导致 IE8 和 HTML5 中的水平滚动条处于非活动状态
我使用 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;
}
I'm using HTML5 Boilerplate and added a gradient background, including the Microsoft filter for IE. In IE8, when the content is larger than the viewport horizontally (vertically works OK) a scrollbar appears, but it is inactive and the content beyond the viewport is inaccessible.
The (simplified) 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>
The 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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
即使没有 H5BP，我也可以重现这一点。 http://jsfiddle.net/nimbu/rnqsW/show/
我的建议是不要使用过滤器：/ 对于不支持的浏览器，只需使用纯色即可。另外，您应该将 -o- 和 -ms- 添加到渐变中，因为 Opera 和 IE10+ 都支持它们。
I could reproduce this even without H5BP. http://jsfiddle.net/nimbu/rnqsW/show/
My recommendation is to not use filters :/ and simply go with a solid color for non-supporting browsers. Also you should add -o- and -ms- to your gradients as both Opera and IE10+ support them.