gpt4 book ai didi

css - Firefox 解释 margin-bottom 错误。也许是一个错误?

转载 作者:行者123 更新时间:2023-11-28 08:43:29 27 4
gpt4 key购买 nike

这里是重现失败的最低版本:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<style type="text/css">
.clear{clear:both;}
.col{float:left;}
.row{margin-bottom:30px;background-color:red;}
</style>
</head>
<body>
<div class="row">

<div class="col">Lorem Ipsum</div>
<div class="clear"></div>
</div>
</body>
</html>

这是 Firefox 的 Bug 或者我误解了什么。编辑:忘记解释问题了。当我将 .row 的 margin-bottom 与 .col 中的 float 结合使用时,该元素将被下拉以获得与 .row margin-bottom 具有相同的值

最佳答案

我不完全确定为什么 Firefox 在这里的行为与其他浏览器不同。这与 collapsing margins 有关.

但是,您可以通过以下方式轻松修复它(在 Firefox 中不会向下移动,浏览器之间保持一致):

  • 正在添加 overflow: hidden.row作为清除 float 的替代方法。

然后您可以删除 <div class="clear"></div>因为不再需要它。

关于css - Firefox 解释 margin-bottom 错误。也许是一个错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5272091/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com