Question

我开始把头发拉出来......

我有以下内容：

<html>
<head>
<style>
    body { margin:0 auto; }
</style>
</head>
<body>
    <div style="border: solid 1px red; width: 100%;">test</div>
</body>
</html>

这适用于IE生成一个漂亮的div，100％宽度，没有H滚动条......

现在在Chrome和FF中，它比窗口宽1px，导致H滚动条...

为什么？我应该使用什么呢？

非常感谢！阿尔伯特

编辑：

我添加了div {margin：0;到头部并移除宽度：100％并且它工作，谢谢。

Answer 1

border位于width之外，因此您获得了100% + 2px。只需删除width属性 - div默认为100％宽。

Answer 2

正如清道夫已经指出的那样。 div的边缘是问题所在。使用此命令重置所有内容：

<style>
  * { margin:0; }
</style>

有关详情，建议您阅读Eric Meyer的this article，了解将所有浏览器中的CSS重置为相同的默认值。

Answer 3

你忘了禁用div的边距。

Answer 4

将width:100%替换为margin:0px

Answer 5

我还有这方面的问题，最后，我添加了一个style =“zoom：1;”到divs

<div style="zoom: 1;">
    <div style="zoom: 1;">
        <table style="width: 100%"...
        ...
        </table>
    </div>
</div>

DIV with overflow:auto and a 100% wide table

Answer 6

我试过了，这种方法很好用：

<html>
<head>
<style>
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
    body { margin:0 auto; }
</style>
</head>
<body>
    <div style="border: solid 1px red; width: 100%;">test</div>
</body>
</html>

Body Margin：0，Div Width：FF和Chrome中100％的问题，在IE中很好

6 个答案: