IE兼容-line-height

    在ie6下,当元素设置了height值和line-height值时,元素的实际高度按两者中大的那个来定的。而在其他浏览器中元素的高度只与height值有关,line-height的值只会影响元素中内容如文字在元素中的位置。

示例代码如下:

<style>

div{

  height:30px;
  line-height:40px;
  width:40px;
  border:1px solid blue;

}

</style>

<div>

   1111

</div>

显示效果如下:


                      
 

在ie6下,div的高度是40px,内部文字111在div元素中垂直居中,如图左;

而在其他浏览器中div的高度是30px,内部文字因为line-height的设置,使它在div元素中的位置垂直偏下,如图右。

你可能感兴趣的:(height)