`

IE下line-height的BUG解决

阅读更多
BUG症状:当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置的line-height数值会失效; 受影响的浏览器: Microsoft Internet Explorer 5.01 / Windows Microsoft Internet Explorer 5.5 / Windows Microsoft Internet Explorer 6 解决方法: 对和文字相连接的img、input、textarea、select、object等元素加以属性 margin: (所属line-height-自身高度)/2px 0; vertical-align:middle   检验好用,不过用户具体使用中要留意设置属性的img、input等很可能不是全局设置,这个时候就要灵活处理,比如一个页面有两个不同line-height属性的容器A(class="a")和容器B(class="b")里都有img、input等,如果是B处遇到此bug,则css里写* .b img {...}等等,这样不影响A容器的css显示,千万不要写* html img {...},因为后者是全局设置。 bug解决者详细说明:http://www.positioniseverything.net/explorer/lineheightbug.html
分享到:
评论

相关推荐

    line-height使文本居中的3像素bug问题

    通过这段代码,你可以观察不同line-height和height值下文本的对齐情况,从而更好地理解这个所谓的“3像素bug”。总之,理解line-height的工作原理以及浏览器如何解析它,对于精确控制文本的垂直对齐至关重要,尤其是...

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

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

    关于IE6 双倍间距的真正原因

    然而,IE6在处理这个属性时存在一个bug,它会将`line-height`与元素的`font-size`相加,而不是仅仅使用`line-height`设定的距离,从而导致了文字之间的实际间距变为正常值的两倍。 为了解决这个问题,开发者们开发...

    IE 常见bug 及其fix

    解决这个问题的方法是使用负的`margin`来补偿,或者使用`line-height`替代`height`。 ```css #element { background: #95CFEF; border: solid 1px #36F; width: 300px; line-height: 2px; /* 使用line-height...

    ie特有bug文档

    ### IE特有Bug知识点解析 #### 一、概述 Internet Explorer(简称IE)作为曾经市场上最主流的浏览器之一,在其发展过程中积累了一系列特有的兼容性问题。这些问题是由于IE浏览器自身的技术限制以及对某些Web标准的...

    CSS在IE6, IE7, IE8, Firefox中的特定使用(Hack).

    标题与描述中所提及的知识点聚焦于CSS在不同浏览器(尤其是IE6, IE7, IE8及Firefox)中的兼容性问题及其解决方案——即所谓的“Hack”技术。在Web开发领域,由于不同浏览器对CSS的支持程度和解析方式存在差异,...

    IE6常见bug附解决方法

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

    IE和Firefox之间兼容性问题

    /* 解决IE下的margin加倍问题 */ } ``` ##### 3. 浮动产生的双倍距离问题 - **问题描述**:在IE浏览器中,某些元素的`margin`值可能会被误解,导致元素之间的间距超出预期。 - **解决方案**: - 将元素的`...

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

    解决这个问题的方法之一是为布局容器使用`line-height`属性或设置固定的高宽比。 ### 8. 清除浮动与自适应高度 在使用`float`布局时,非浮动元素可能会出现在浮动元素下方,而不是按顺序排列。这是因为浮动元素...

    9个最常见IE的Bug及其fix

    **解决方案**:对于这种情况,可以尝试使用透明的背景图片替代高度属性,或者使用`line-height`属性结合`font-size`属性来模拟所需的高度,以此绕过IE6的限制。 ### 总结 以上四个问题是IE6中最常见的布局与样式...

    IE6,7,8兼容

    本文主要针对IE6、IE7和IE8以及Firefox浏览器在DIV+CSS布局下的兼容性问题进行分析,并提供一系列解决方案。 #### 二、CSS兼容性技巧 ##### 1. **垂直居中** - **问题描述**:在某些情况下,需要将文字或元素在...

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

    解决方法是为布局容器添加`line-height`属性,或者设定固定高度和宽度,保持页面结构简洁。 8. **清除浮动**: 清除浮动是为了防止父元素因浮动子元素而高度塌陷。可以使用`clear: both;`或创建一个清除浮动的空...

    CSS兼容IE和Firefox的技巧集合

    - **问题描述**:设置了`float`属性的`div`在IE下设置的`margin`会加倍,这是一个IE6已知的bug。 - **解决方案**:在该`div`中添加`display:inline;`属性。 - **示例代码**: ```css #imfloat { float: left; ...

    css兼容性(IE 和 firefox)技巧大全.doc

    一种解决方案是为body下的一个div设置类,然后利用`width:expression()`来实现IE的最小宽度效果。 6. **浮动文本的3像素bug**:当左侧元素浮动,右侧元素使用外边距进行对齐时,IE浏览器会出现3像素的间隙。为解决...

    在IE和火狐浏览器下页面兼容性问题的处理(最完整篇

    解决方法包括使用`line-height`属性或给div设定固定的高和宽,同时保持页面结构简洁。 8. **浮动div的闭合问题**:在CSS布局中,使用浮动(`float`)可能导致父级元素高度塌陷。解决方法通常包括清除浮动(`clear: ...

    IE6,IE7,FF等浏览器不兼容原因及解决办法

    - **解决办法**:为了解决这个问题,可以通过设置`line-height`来统一文字的高度。这有助于保持页面布局的一致性,避免因为1像素的差异导致布局错乱。 ##### 2. 容器高度限定问题 - **问题描述**:在Firefox中,...

    css部分bug解决

    /* IE6下解决外边距合并问题 */ } ``` ### 3. 浮动元素与宽度计算问题 **问题描述**:在IE浏览器中,当元素设置了`float`属性并指定宽度时,可能会出现宽度计算不准确的问题。 **解决方案**: - **display: ...

Global site tag (gtag.js) - Google Analytics