Body Margin:0, Div Width:100% 在 FF 和 Chrome 中出现问题，在 IE 中正常

发布于 2024-08-27 01:46:44 字数 498 浏览 7 评论 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% 并且它起作用了，谢谢。

原文

I'm starting to pull my hair out of my head...

I have the following:

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

This works in IE producing a nice div, 100% width, no H scrollbar...

Now in Chrome and FF, it is 1px wider than the window, causing an H scrollbar...

Why is that? What SHOULD I be using instead?

Thanks a lot!
Albert

EDIT:

I added div { margin: 0; } to the head and removed the width: 100% and it worked, thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无声无音无过去 2024-09-03 01:46:44

边框位于宽度之外，因此您得到100% + 2px。只需删除 width 属性即可 - div 默认为 100% 宽。

回复收藏 0 原文

抹茶夏天i‖ 2024-09-03 01:46:44

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

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

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

As scavenger already pointed out. The margin of the div ist the problem. Reset everything with this command:

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

For more information I recommend you to read this article by Eric Meyer about reseting the CSS in all browsers to the same default values.

回复收藏 0 原文

缺⑴份安定 2024-09-03 01:46:44

您忘记禁用 div 的边距。

回复收藏 0 原文

柏拉图鍀咏恒 2024-09-03 01:46:44

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

回复收藏 0 原文

妖妓 2024-09-03 01:46:44

我仍然对此有疑问，最后我添加了 style="zoom: 1;"到div

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

DIV 与溢出：自动和100％宽表

I still had issues with this, in the end, I added a style="zoom: 1;" to the 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

回复收藏 0 原文

寂寞陪衬 2024-09-03 01:46:44

我尝试了一下，这种方法效果很好：

<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>

I tried it and this way works fine:

<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>

回复收藏 0 原文

~没有更多了~