-1

这只是我的强迫症，但我必须知道这种行为是否有解释。我有一个 1280 X 1024 视口的显示器。我有一个要以页面为中心的网站。我还希望站点宽度为 1280 像素宽。

现在，使用 FF 和 Opera，我可以将 body 设置为 100%，将包装器设置为 1260px（考虑滚动条），但我没有得到水平滚动条。如果我使用 IE7 或 8，我会得到一个水平滚动条。

FF 和 Opera 以 1260px 计算正文宽度（假设滚动条为 17px），而 IE 以 1259px 计算它。我测量了 IE 中的滚动条，它也是 17px。

为什么是这样？

就是这个...

@import url("reset.css"); <- Erik Meyers reset
html, body{
  width:100%;
  background:#ccc;
  font-size:100%;
  /**overflow-x:hidden;**/ <-- Works fine with overflow-x:hidden
  font-family:Arial;
}

#wrap-page{
  margin:auto;
  width:1263px;
}

#wrap-content{
  margin:0 5px;
}

<!DOCTYPE html>
<html>
  <head>
  <title></title>
  </head>
  <body>

    <div style="wrap-page">
      <div style="wrap-page">
        <div style="float:left;height:2000px;width:1263px;">The test</div>
        <div style="clear:both;"></div>
      </div>
      <div style="clear:both;"></div>
    </div>

  </body>
</html>
4

1 回答 1

0

你在使用重置CSS吗？

body{
margin:0;
padding:0;
}

*{
margin:0;
padding:0;
}

重置 CSS

或者您可以使用 ie\9 hack ..

如果你的 CSS 看起来像这样......

#myElement {
    width: 300px;
    width: 500px\9;
}

结果#myElement在 IE 7、8 和 9 中为 500 像素宽，而在所有其他浏览器中#myElement为 300 像素宽。

http://webdesignandsuch.com/ie9-specific-css-hack/

于 2012-12-28T06:58:48.153 回答