Question

这只是我的痴迷，但我必须知道是否有这种行为的解释。我有一个带有1280 X 1024视口的显示器。我有一个我想要在页面上居中的网站。我还希望网站宽度为1280像素宽。

现在，使用FF和Opera，我可以将主体设置为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>

Answer 1

你使用重置css。

body{
margin:0;
padding:0;
}

*{
margin:0;
padding:0;
}

<强> Reset CSS

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

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

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

在IE 7,8中，结果将是#myElement 500像素宽。 9，在所有其他浏览器中，#myElement宽度为300像素。

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

为什么IE中的体宽为负4像素差异

1 个答案: