0

我开始把头发从头上拔下来...

我有以下内容：

<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; } 到头部并删除了 width: 100% 并且它起作用了，谢谢。

4

6 回答 6

3

border是坐在外面的，width所以你得到100% + 2px。只需删除该width属性 - 一个 div 默认为 100% 宽。

于 2010-03-31T11:35:55.387 回答
1

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

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

有关更多信息，我建议您阅读Eric Meyer 撰写的关于将所有浏览器中的 CSS 重置为相同默认值的文章。

于 2010-03-31T11:27:17.380 回答
0

我仍然有这个问题，最后，我添加了一个 style="zoom: 1;" 到 div

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

带溢出的 DIV：自动和 100% 宽的表

于 2010-03-31T12:45:46.467 回答
0

您忘记禁用 div 的边距。

于 2010-03-31T11:19:39.927 回答
0

替换width:100%_margin:0px

于 2010-03-31T11:23:04.817 回答
0

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

<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>
于 2021-06-12T15:37:28.453 回答