Container: padding: 20px;
Float
Float
Clear

在浮动的DIV下面放一个有clear属性的DIV是我们做布局的时候常常用的一种方式。如果这个浮动的DIV和有clear属性的DIV是放在一个作为容器的DIV里面,而这个最外层的DIV由具有padding的时候,在IE浏览器里面,浮动的DIV和有clear属性的DIV之间会有一个奇怪的间隙。

如果你分别在IE和Firefox中查看右边的示例,你就会看到,在Firfox 中跟我我们预期的表现是一样的,只有外层容器和DIV之间有padding;而在IE中,回有一个20px间隙在浮动的DIV和有clear属性的DIV之间。

只是示范用到的代码:

<div style="padding: 20px;">

Container: padding: 20px; 

<div style="float:left; width: 50%; background: green; color: white;">

Float 

</div><div style="float:right; width: 50%; background: blue; color: white;">

Float 

</div>

解决这个问题的方法就是放弃使用最外层DIV容器的顶部和底部padding,该由内部DIV的顶部和底部margin来时实现。这样最终的效果在IE和Firefox中就是一样的。

相关文章:

  • 2022-12-23
  • 2021-07-02
  • 2022-12-23
  • 2021-11-20
  • 2021-12-31
  • 2022-12-23
  • 2021-12-10
猜你喜欢
  • 2022-12-23
  • 2021-12-19
  • 2022-12-23
  • 2022-01-12
  • 2022-12-23
  • 2021-12-10
  • 2022-12-23
相关资源
相似解决方案