[兼容]CSS

块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG, 可以设置 display:inline来解决。

(display:inline 处理的是 IE6 下浮动元素的水平的 margin-left是实际像素2倍的 bug)

   <div style="width:800px; height:500px; background:#993333;">
     <div style="width:200px; height:200px; background:#cc9999;margin:10px;float:left; display:inline ;"></div>
   </div>

 

---

line-height 与 height 的影响

当元素设置了 line-height 和 height 值后，其影响因为有浏览的差异而不同。

示例：

css:

       .div1{

              height:50px;

              line-height:100px;

              background-color:red;

       }

       .div2{

              background-color:green;

              height:20px;

       }

html:

       <div class="div1">

              文本垂直居中

       </div>

       <div class="div2"></div>

效果如下：

上图为 Firefox 下的结果，从上图我们可以看出文本的垂直居中只和 line-height 的值有关系，根据 line-height 值大小垂直居中， line-height 值的设置不会改变元素的高度。

 

 

上图为 IE 下的结果，我们可以看出在 IE 浏览器下 line-height 值的大小对元素的高度会有影响。在本示例中我们指定 div1 的高度为 50 px ，但是由于我们同时指定了 line-height 高度为 100px ，结果 div1 的实际占用空间高度为 100 px 。

 

(引用: http://blog.csdn.net/JeamKing/archive/2010/04/13/5483127.aspx)

 

---