Question

注意：请参阅问题的底部进行更新！

以下是我的HTML / CSS的摘录（示例）：

html { height: 100%; }
body
{
  height: 100%;
  margin: 0px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699CC', endColorstr='#1C3854');
}

.container
{
  display: inline-block;
  width: 50%;
}

.box
{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

和

<body>
  <div class="container">
    <div class="box">
      <!-- content 1 -->
    </div>
  </div><div class="container">
    <div class="box">
      <!-- content 2 -->
    </div>
  </div>
</body>

此页面只需要在IE8 +中工作（因为它在SOE上运行）。

当浏览器最大化和/或内容非常少时，没有预期的滚动条。

当浏览器很小和/或内容很多时，会有滚动条，但它们会显示为灰色。用户无法滚动到可见区域的边缘。

我尝试在HTML和body上指定一个溢出属性，但它仍然只显示灰色滚动条。

评论高度：100％的html / body似乎可以修复垂直滚动而不是水平 - 但它会破坏我的渐变。

我做错了什么？

更新：我试图用lorem-ipsum内容组合一个样本来显示jQuerybeast的问题，我发现滚动突然工作：我最初感到困惑但后来意识到我没有包含背景渐变（滤波器：PROGID ......）。添加渐变后，滚动停止工作。为什么这个渐变会破坏滚动？

Answer 1

不幸的是，周围没有好的解决方案。

更糟糕的是： progid：DXImageTransform.Microsoft.gradient 可怕的错误所以鼠标事件（悬停，点击，滚动等）都是错误的。 - 小心！

无论如何，你最好开始考虑哪些后备/变通办法/ NastyHacks让你觉得可以接受。

您可以考虑使用渐变背景图像并相应地重复它。

Answer 2

我找到的解决方案是在事件发生后设置溢出，如下所示：

.gradient{ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#CCCCCC',GradientType=0 ); }

$('html, body').animate({scrollTop:$('#mydivid').position().top}, 'fast').css('overflow', 'auto');

我的HTML / CSS中禁用了滚动条？使用Progid Microsoft渐变时。

2 个答案: