Chrome缺陷：margin-bottom到浏览器边缘？

Question

Chrome缺陷：margin-bottom到浏览器边缘？

9

我不确定这是Google Chrome的bug还是意料之中，但它真的很让我烦恼：如果我输入类似于

这样的内容，浏览器会自动将其转换为：

。这可能会使我的代码出现问题。

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

Chrome浏览器没有显示任何边距。这个div就在浏览器底部结束了。实际上，其他任何浏览器都可以正确地呈现它。

- Maxim Zubarev

4个回答

3

在包含div的元素上添加一个padding-bottom，即使它是body元素。这适用于所有浏览器，因此您需要从div中删除底部margin。

- beerwin

你的Chrome浏览器是否是最新版本？现在已经更新到第11版了（可以在关于Chrome的选项中查看）。 - beerwin

1

好的，算了吧。显然是我的错 :O 我在所有常用样式表中都使用了height: 100%，所以这个错误出现在了我所有的项目中，哈哈。 - Maxim Zubarev

1

任何对两年前已被接受的答案进行踩票的人应该友善一些，并留下评论说明为什么需要这样做。 - beerwin

2

在Google Chrome浏览器中，{padding-bottom: XXpx;}不起作用，但{padding-bottom: XXem;}有效。请注意，第一个使用像素（pixels）, 第二个使用ems。

- Waseem Sadiq

0

在IE中，css的padding和margin指令可以正常工作，但在Chrome中却无效。如果它们被放置在.css文件中，Chrome会忽略它们。为了解决这个问题，将所有的padding和margin指令放在<STYLE>标签内的一个单独文件中，然后通过<?php include ('margins.php');?>或将其包含到所有页面中，因为如果这些指令包含在页面上，它们在Chrome中可以完美地工作。

- Eugene Kartoyev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris · Accepted Answer

将整个网站（或仅有需要捕获边距的区域）包裹在一个

元素中。

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

如果设置填充不适合您，可以尝试上面的方法。我不想设置填充，因为当数据是动态的，并且我不知道是否会有下一个框时，底部框的边距是我的标准方式来为下一个框留出空间。

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

对于其他阻止该边距渗透的浏览器来说，这种改变并不重要。我在IE 8及以上版本中进行了回归测试，并没有发现任何问题。