开发者

Microsoft gradient filter causes inactive horizontal scrollbar in IE8 with HTML5

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 C开发者_如何学GoSS:

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 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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜