`
keimon
  • 浏览: 72861 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

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元素中的位置垂直偏下,如图右。

  • 大小: 257 Bytes
  • 大小: 281 Bytes
0
0
分享到:
评论

相关推荐

    关于td的height和line-height兼容问题

    写页面的时候,遇到处理数据的时候还是要用TABLE的,但是有的时候显示出来table, ie和ff的高不同。

    css浏览器兼容性前端人员的必备

    将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行。 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决...

    IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    不同的浏览器对CSS的解释都有一点出入,特别是padding, line-height这些要细微控制的地方,下面的hack基本可以解决这个问题: • 在属性前加下划线(_),那么此属性只会被IE6解释 • 在属性前加星号(*),此属性只会被...

    JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

    修正了网上其它版本的一些错误。... line-height: 180%; } td { font-size: 12px; line-height: 150%; }                 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    IE6兼容性问题及IE6常见bug详细汇总

    1、IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入... 1)字体大小为奇数之边框高度少1px 解决方法:字体大小设置为偶数或line-height为偶数 2)line-height,文本垂直居

    CSS 多浏览器兼容性问题及解决方案

    Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点 1、DOCTYPE 影响 CSS 处理 ... 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行

    [removed]google 向上向下滚动特效,兼容IE6,7,8,FF

    2010最新全面兼容ie6,ie7,ie8,ff的CSS HACK写法 #google1 { border:none; width:270px; height:20px; margin:0px 0; font-size:12px; padding-left:0px; overflow:hidden; font-family:Arial; } #google1 ul { ...

    JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)

    .Scroller {line-height:20px; border:1px solid #D4D4D4; padding:0px 10px; height:20px; width:400px;} .Scroller *{margin:0px; padding:0px;} .ScrollMid {float:left;} .ScrollMid ul{width:400px;float:left;

    select的最佳预设打造全兼容各浏览器select

    我对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况:height.100.padding.0、height.no.padding.100、no.height.no.padding,结果如 链接图片各浏览器DEMO外观 ...

    li在ie/firefox浏览器中行高不一致解决方法(浏览器兼容)

    line-height:30px;overflow:hidden;zoom:1;}.tu_freeline_list li span{float:left;height:30px;overflow:hidden;width:155px;font-size:12px;}.tu_freeline_list li strong{float:right;font-size:12px;}&lt;/style...

    IE浏览器下的CSS问题小结

    解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要,在高度上我们不能容忍1px 的差异。 2.ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑...

    CSS多浏览器兼容性(IE和Firefox)技巧大全推荐

    将行距增加到和整个DIV一样高 line-height:200px;然后插入文字,就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这...

    CSS多浏览器兼容总结(个人经验)

    1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后, div ... 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 5、在mozilla firefox和IE中的BOX模型解释不一

    CSS 浏览器兼容问题整理大全(比较全)

    将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在...

    CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

    从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于浏览器的兼容性问题,请尽量用符合W3C标准格式写代码。... 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控

    调整input里面的输入光标大小并兼容主流浏览器

    input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中,如下图:   在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又...

    比较全的CSS浏览器兼容问题整理总结

    CSS对浏览器的兼容性有时让人很头疼,或许当... 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加

    兼容ie ff div 层 打开+关闭+ 拖动+遮罩+移动+动画改变高宽

    1 拖动+遮罩+移动+改变元素大小 popper.w’s code body{text-align:center} #dd{ margin:50px auto} #odiv{ width:400px; height:200px;border:1px dotted red; border:1px dashed green;... line-height

    目前比较全面的浏览器CSS BUG兼容汇总

     将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行。 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决...

Global site tag (gtag.js) - Google Analytics