`
keimon
  • 浏览: 75352 次
  • 性别: 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
分享到:
评论

相关推荐

    个人CSS设计兼容性问题总结教程

    在IE8及以上版本,文本居中显示是默认的,但在IE6和IE7中,可以使用`line-height = height`实现居中,但可能会导致输入框内的光标大小改变。解决这个问题的一个技巧是使用`!important`来优先应用`line-height:0px;`...

    CSS line-height行高上下居中垂直居中样式属性

    - 在处理中文文本或中英文混合内容时,`line-height`的表现可能会因为浏览器的差异或字体的不同而有所变化,尤其是老版本的 Internet Explorer (如 IE6, IE7, IE8)。 - 在处理图片与文本的垂直居中对齐时,可能需要...

    IE兼容性总结

    - **解决方法**:通过设置`line-height: 0px;`来消除空白。 4. **元素ID #up_bar边界下边的宽度问题** - **问题描述**:元素`#up_bar`下边界宽度丢失。 - **解决方法**:一种方法是在`#up_bar`中增加`border-...

    解决IE6下,给图片加上line-height属性不起作用的解决方法

    总之,面对IE6的`line-height`兼容性问题,开发者需要采取额外的CSS修复策略,通过设置图片或其他受影响元素的`margin`和`vertical-align`属性,确保在各个浏览器中都能得到一致的布局效果。在逐步淘汰老旧浏览器的...

    IE6,IE7,IE8兼容性问题

    ### IE6, IE7, IE8 兼容性问题详解 #### 一、引言 在Web开发过程中,确保网站能够在各种不同的浏览器中正常显示是非常重要的。尤其是在早期的Web时代,Internet Explorer(简称IE)系列浏览器占据着重要的市场份额...

    font和line-height之CSS代码书写顺序不同,导致显示效果不一样

    在某些浏览器(如IE、Firefox和Opera)中,当先声明`line-height`再声明`font`时,`line-height`的设置可能会被`font`中的`font-size`所覆盖,导致行间距看起来没有按预期工作。而反之,如果先声明`font`,`line-...

    针对firefox ie6 ie7 ie8的css样式hack

    在进行Web开发的过程中,我们经常会遇到浏览器兼容性问题,尤其是早期的Internet Explorer(IE)版本如IE6、IE7和IE8与现代浏览器如Firefox之间的差异。为了确保网站能够在不同浏览器下正常显示,开发者需要使用特定...

    最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)

    line-height: 200px; /* 假设容器高度为200px */ vertical-align: middle; } &lt;div class="vertical-center"&gt; &lt;!-- 需要居中的内容 --&gt; ``` 2. **Margin加倍问题** IE6有一个众所周知的问题,就是当一个...

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

    line-height属性在IE和Firefox浏览器中表现较为一致,当设置line-height为某一固定值时,例如22px,页面上显示的高度均为24px。虽然实际数值比预期值大了2px,但至少在不同浏览器中保持了统一。 此外,描述中提到的...

    让CSS兼容IE和Firefox的技巧集合

    1. **div的垂直居中问题**:在IE和Firefox中,可以通过设置`line-height`与div的高度相同,并结合`vertical-align: middle;`实现垂直居中。但这种方法不适用于多行文本。 2. **margin加倍问题**:在IE6中,设置为...

    ie的常见兼容问题

    line-height: 100px; } ``` 对于其他类型的元素,则可以考虑使用Flexbox或Grid布局来轻松实现垂直居中。 #### 四、浮动与清除问题 在IE中处理浮动元素时也会遇到各种问题,特别是关于如何正确地清除浮动。例如...

    CSS实现单行、多行文本溢出显示省略号的实现方法.docx

    为了增加兼容性,可以使用CSS渐变背景技术,配合`line-height`来模拟多行省略号的效果。需要注意的是,这个方法要求将高度设置为`line-height`的整数倍,以避免超出的文字露出。同时,为了兼容IE6和7,需要添加额外...

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    但在IE6、7中,若要让内容在div内垂直居中,除了设置`vertical-align:middle`,还需要将`line-height`设置为与div相同的高度。这种方法需要注意内容不应换行,否则可能导致对齐失效。 其次,`margin`加倍问题主要...

    最全的CSS浏览器兼容问题整理(IE6、IE7)

    在Web开发中,CSS(层叠样式表)的浏览器兼容性问题一直是开发者面临的挑战,特别是针对老旧的Internet Explorer版本,如IE6和IE7。了解和掌握这些兼容性技巧,能有效提升网页在不同浏览器上的表现。 1. **垂直居中...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf

    line-height: 200px;`配合内联元素来实现,但这种方法不适用于多行文本。 3. **CSS优先级与`!important`**: FF支持`!important`规则,但IE6忽视它。因此,为FF特别设置样式时,可以使用`!important`,但要注意...

    IE6下 vertical-align:middle 和 height 引发的边框消失

    例如,将`line-height`和`height`都设置为50px,这样可以实现文本的垂直居中,同时不会触发IE6的边框消失bug。 ```css li,div{ border:1px solid #ff0000; line-height:50px; height:50px; } ``` 2. **添加...

Global site tag (gtag.js) - Google Analytics