Question

我在使用Internet Explorer在我的网站上正常工作时遇到了一些麻烦。我的一个问题是，我的div有overflow:auto。

一旦我使窗口足够小以使溢出产生影响，div由于某种原因缩小了一点。有谁知道为什么会这样？

网页width:100% - 请注意左侧和右侧的红色边框。 enter image description here

页面overflow:auto生效 - 红色边框div缩小 enter image description here

Red Bordered Div

.content {
   width:100%;
   background-color:#F1F2F7;
   position: absolute;
   padding:0 0 120px 0;
   z-index:2;
   overflow:auto;
   height:100%;
   border:1px solid red;
}

Answer 1

我遇到了类似的问题。滚动条在IE10 +，FF和Chrome中正确定位，但与IE9中的屏幕截图相同。这是修复：

[
  {
    "@id": "http://www.example.com/id/linkFrom",
    "http://www.example.com/link": [
      {
        "@id": "http://www.example.com/id/linkTo"
      }
    ]
  },
  {
    "@id": "http://www.example.com/reifi/1",
    "@type": [
      "http://www.example.com/vocab#specialLink",
      "http://www.w3.org/1999/02/22-rdf-syntax-ns#Statement"
    ],
    "http://www.w3.org/1999/02/22-rdf-syntax-ns#subject": [
      {
        "@id": "http://www.example.com/id/linkFrom"
      }
    ],
    "http://www.w3.org/1999/02/22-rdf-syntax-ns#predicate": [
      {
        "@id": "http://www.example.com/link"
      }
    ],
    "http://www.w3.org/1999/02/22-rdf-syntax-ns#object": [
      {
        "@id": "http://www.example.com/id/linkTo"
      }
    ]
  }
]

我们的项目与许多人一样，将所有元素规范化为box-sizing：border-box，这似乎会导致IE9中的dGrid测量代码出现问题。

Answer 2

这是由于＆＃34; BORDER＆＃34;，删除边框并保留其他所有内容。它会起作用。

.content {
   width:100%;
   background-color:#F1F2F7;
   position: absolute;
   padding:0 0 120px 0;
   z-index:2;
   overflow:auto;
   height:100%;
}

Answer 3

试试这个，在IE8 / IE9中正常工作。

更新了CSS中的几个属性：

<html>
<head>
<title>IE 9 Scrollbar</title>
<style>
body { margin:0; padding:0; overflow-y:scroll;}
.content {
   width:100%;
   background-color:#F1F2F7;
   position: absolute;
   padding:0 0 120px 0;
   z-index:2;
   overflow:auto;
   height:100%;
}
</style>
</head>
<body>
    <div class="content">
        test
    </div>
</body>
</html>

Answer 4

div缩减的原因是position:absolute。删除它解决了IE 9中的问题。

IE9溢出时缩小DIV：自动滚动条外观

4 个答案: