HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – 为什么Firefox在折叠边距时表现不同?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
Firefox在div.p的顶部渲染100px的边距.这似乎是利润率的崩溃.但是div.p的计算高度是100px.根据 spec它不应该做保证金崩溃.这是一个错误,还是我错了? Chrome按预期呈现.
codepen
.s {
  height: 100px;
  width: 200px;
  BACkground: yellow;
  float: left;
}
.p {
  margin-top: 20px;
  margin-bottom: 100px;
  zoom: 1;
}
.p:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
}
<div class="p">
  <div class="s"></div>
</div>

解决方法

我不确定为什么传统的clearfix不起作用,但这里有三种方法:

就像Kaiido说的那样* {overflow:auto;}可以解决这个问题.这也可以作为* {overflow:hidden;}.

如果你不想要一个毯子溢出,你可以通过将overflow:hidden或overflow:auto添加到.p来更精确.这也解决了这个问题.

最后,如果你在clearfix(.p:after)中更改display:block to display:table,问题也会消失.

我真的不确定为什么传统的clearfix不起作用,但是解决它并不困难.

大佬总结

以上是大佬教程为你收集整理的html – 为什么Firefox在折叠边距时表现不同?全部内容,希望文章能够帮你解决html – 为什么Firefox在折叠边距时表现不同?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。