Chrome bug:浏览器边缘的底部边距?

发布于 2024-11-08 04:43:09 字数 299 浏览 3 评论 0原文

我不确定这是否是 Google Chrome 中的一个错误,或者这是否是我想要的,但这真的让我很恼火:如果我得到类似

<body><div style="margin-bottom: 50px;">much content</div></body>

Chrome 没有显示边距的信息。 div 仅在浏览器底部边缘结束。从字面上看,任何其他浏览器都能正确呈现此内容。

I'm not sure if this is a bug in Google Chrome or if this is wanted, but it really annoys me: If I got something like

<body><div style="margin-bottom: 50px;">much content</div></body>

there is no margin shown by Chrome. The div just ends at the bottom browser edge. Literally, any other browser renders this correctly.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(4

享受孤独 2024-11-15 04:43:09

将整个网站(或仅包含要捕获边距的区域)包裹在“

<div style="overflow:auto;"></div>

如果设置填充不吸引您”中,请尝试上述方法。我不想设置填充,因为当数据是动态的并且我不知道是否会有一个框时,框底部的边距是我为下一个框腾出空间的标准方法。

边距不会“渗透”指定了溢出的框,因此这通过允许最后一个框在新的overflow:auto div内具有边距来解决Chrome中的问题。

对于其他阻止该边距出血的浏览器来说,此更改无关紧要。我在 IE 8 及更高版本中测试了这方面的回归,但没有发现任何问题。

Wrap your whole site (or just the area that has the margin you want to capture) in a

<div style="overflow:auto;"></div>

If setting padding does not appeal to you, try the above. I didn't want to set padding, because a margin on the bottom of boxes is my standard way of making room for the next box when data is dynamic and I don't know whether there will be one.

Margins will not "bleed through" a box with overflow specified, so this fixes the problem in Chrome by allowing that last box to have margin inside the new overflow:auto div.

This change is inconsequential to the other browsers who were blocking that margin bleed anyway. I tested in IE 8 and up for regressions on that side and found none.

泅渡 2024-11-15 04:43:09

向包含 div 的元素添加 padding-bottom,即使它是 body 元素。
这适用于所有浏览器,因此您必须删除 div 的底部边距。

add a padding-bottom to the element containing your div, even if it's the body element.
This works in all browsers, so you will have to remove the bottom margin from the div.

总以为 2024-11-15 04:43:09

在 Google Chrome 上,{padding-bottom: XXpx;} 不起作用,但 {padding-bottom: XXem;} 可以。

请注意,第一个使用像素,第二个使用 em。

On Google Chrome {padding-bottom: XXpx;} doesn't work, but {padding-bottom: XXem;} does.

Note the first uses pixels and second ems.

画尸师 2024-11-15 04:43:09

css padding 和 margin 指令在 IE 中工作正常,但在 Chrome 中不行。如果它们被放置在 .css 文件中,Chrome 就会忽略它们。要解决此问题,请将所有填充和边距指令放入

The css padding and margin directives work fine in IE, but not in Chrome. Chrome just ignores them, if they are placed in a .css file. To resolve this problem, put all the padding and margin instructions in a separate file within the <STYLE> tags, and then include it with the help of <?php include ('margins.php');?>. or <!--#include virtual="margins.php"--> into all of your pages, because these directives works in Chrome perfectly if they contained on the page.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文