芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
6

firefox 3.5+ clearfix bug

作者 芒果/分类 代码/发布于 2012-06-26 11:14

早前提到的清除浮动的经典方案:http://www.mangguo.org/mangguo-teach-you-clear-float/ 有纰漏,如果使用以下代码:

.clearfix:after {
	content: '\20';
	display: block;
	height: 0;
	clear: both;
}
.clearfix {
	zoom: 1;
}

firefox 3.5+ 下会导致如图结果,c 容器的 margin-top 值会作用到相邻的前一个节点上:

使用 content 值不为空的方法却不会造成这个 bug,看代码:

.clearfix:after {
	content: '.';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	zoom: 1;
}

详细参考 bug 的演示页面:clearfix.html

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/firefox-3-5-clearfix-bug/" title="firefox 3.5+ clearfix bug" rel="bookmark">firefox 3.5+ clearfix bug | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 6 条群众意见

  1. Sivan /2012-06-26 11:33

    用 display:table;content:””; 也可以,还短。 回应

    #1
  2. 芒果Sivan/2012-06-26 11:43

    嗯,确实。 回应

    #2
  3. airoschou /2012-06-28 10:44

    一般UL下会有这个 回应

    #3
  4. 流水线 /2012-07-03 14:55

    firefox3.5杂的 回应

    #4
  5. http://loum.info/ /2012-07-04 15:03

    原来如此,还以为有多神奇呢 回应

    #5
  6. 电缆回收 /2012-07-21 22:53

    firefox的市场占有率最近不断下降啊。 回应

    #6

下面我简单说几句