Firefox解释margin-bottom错误。也许是一个Bug？ [英] Firefox interprets margin-bottom wrong. Maybe a Bug?
问题描述
此处是重现失败的最低版本：
<！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-8http-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的错误或我误会了。
编辑：
忘记解释问题。当im使用margin-bottom结合.col中的float使用margin-bottom然后元素将被下拉为与.row margin-bottom相同的值
我不完全确定为什么Firefox的行为与其他浏览器不同。这与收合边距有关。
但是，你可以很容易地修复它（在Firefox中没有向下移动，浏览器之间的一致性）：- 将
overflow：hidden添加到.row作为清除浮动的备用方法。
然后，您可以删除< div class =clear>< / div> 因为它不再需要。
here a minimum version to reproduce the failure:
<!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>
It is a Bug of Firefox or I misunderstand something. Edit: Forgot to explain the Problem. When im using margin-bottom for the .row in combination with a float in .col Then the element will be dropped down for the same value as the .row margin-bottom has
I'm not entirely sure why Firefox is behaving differently to other browsers here. It is something to do with collapsing margins.
However, you can easily fix it (no moving down in Firefox, consistency between browsers) by:
- Adding
overflow: hiddento.rowas an alternate way to clear the float.
You can then remove the <div class="clear"></div> because it's no longer required.
这篇关于Firefox解释margin-bottom错误。也许是一个Bug？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
