Chrome bug:浏览器边缘的底部边距?
我不确定这是否是 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
将整个网站(或仅包含要捕获边距的区域)包裹在“
如果设置填充不吸引您”中,请尝试上述方法。我不想设置填充,因为当数据是动态的并且我不知道是否会有一个框时,框底部的边距是我为下一个框腾出空间的标准方法。
边距不会“渗透”指定了溢出的框,因此这通过允许最后一个框在新的overflow:auto div内具有边距来解决Chrome中的问题。
对于其他阻止该边距出血的浏览器来说,此更改无关紧要。我在 IE 8 及更高版本中测试了这方面的回归,但没有发现任何问题。
Wrap your whole site (or just the area that has the margin you want to capture) in a
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.
向包含 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.
在 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.
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.