`

IE6下line-height 失效的解决办法

    博客分类:
  • css
CSS 
阅读更多

IE6下使用line-height时候, 全文字会垂直居中对齐的, 如果当文字遇到图片, 文本框, 下拉框等其他元素时候在ie6下就会失效, 很多人一般用padding的方法来解决的。 这里说下另种方法。

先看下效果:点击阅览IE6下line-height 失效的解决办法

点击预览页面,可以查看源文件。里面也有详细说明。 以下是解决 IE6下line-height 失效的解决办法 主要代码。

 

<style type="text/css">

.aa{ height:100px; width:300px; line-height:100px; background-color:#099;}

/*  

这里 假设  input 高度等于 20 

margin: (所属line-height-自身高度)/2px 0;

就等于 margin:(100-20)/2px 0 = margin:40px 0;

大致效果是有了, 肯定还是有点小偏差,input高度是我假设20的。

*/

.aa input{ margin:40px 0; vertical-align:middle; }

</style>

<div class="aa">居中对齐 <input name="" type="text" /></div>

分享到:
评论

相关推荐

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

    但当行中有其他元素时(如图片,SPAN,li..)在IE6.0下line-height会不起效果,后来查了下资料,果然如此,资料如下: 当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置...

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

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

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

    对于Tab在IE6下的兼容性问题,需要在父元素样式中添加`_overflow`,因为IE6认为父元素层级高于子元素。另外,IE6不支持除`&lt;a&gt;`标签外的其他标签的`:hover`事件,可以通过jQuery或者其他JavaScript库进行模拟。 在IE...

    css浏览器兼容问题

    15. **IE6-7 line-height失效问题**: 对于某些元素,`line-height`可能在IE6-7中失效,需要结合具体元素属性进行调整或寻找替代方案。 以上只是一部分常见的CSS兼容性问题及其解决方法,实际开发中可能遇到更多...

    浏览器兼容问题

    **解释**:通过将元素设置为浮动可以解决 IE6-7 中 `line-height` 失效的问题。 #### 十六、td 自动换行的问题 **问题描述**:当表格的宽度固定时,`td` 内容会自动换行。 **解决方案**:设置 `table` 的 `word-...

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

    解决办法是在该元素上添加`display:inline`,这可以使IE6正确解析margin值。 浮动元素产生的双倍距离问题也是IE6的一个经典bug。例如,一个左浮动的div设置了`margin-left`,在IE6中会生成两倍的距离。通过设置`...

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

    - **IE6的圆角**:由于IE6不支持CSS3的圆角,可以使用图片或JavaScript库实现圆角效果,或者牺牲在IE6下的圆角显示。 - **背景闪烁**:通过JavaScript设置IE6缓存背景图片,避免hover时闪烁。 - **最小高度问题**:...

    ie特有bug文档

    - **解决方案**:在需要兼容IE6的场景下使用此技术。 ##### 15. **PNG图像颜色问题** - **问题描述**:在IE6至IE7中,PNG格式的图像在颜色值与背景颜色完全一致时,显示的颜色可能存在差异。 - **解决方案**:使用...

    前端处理浏览器兼容问题

    #### 十五、IE6-7`line-height`失效的问题 **问题**:在IE6-7中,当`&lt;img&gt;`标签与文字放在同一行时,`line-height`可能不起作用。 **解决方法**:将元素设置为浮动。 ```css img, p { float: left; } ``` #### ...

    css兼容问题

    **问题描述**:IE浏览器不识别`min-width`和`min-height`属性,导致宽度和高度设置失效。 **解决方案**: 1. **expression 方法**:通过JavaScript表达式来模拟`min-width`和`min-height`的效果。 - **CSS**: ``...

    css入门教程IE和Firefox浏览器CSS兼容性技巧整理.docx

    可以尝试调整`line-height`或者使用其他定位技术来解决。 9. **跨浏览器的盒模型**: IE和Firefox对盒模型的处理方式不同,这可能导致元素的宽度和高度计算错误。了解并适当地使用`box-sizing`属性可以帮助解决这...

    ie的常见兼容问题

    然而,在IE6和IE7中,这种方法可能会失效。解决方法是在`.clearfix`类中加入额外的样式: ```css .clearfix { zoom: 1; /* For IE6/7 */ } ``` 通过这种方式,可以有效地解决IE中的浮动清除问题。 综上所述,IE...

Global site tag (gtag.js) - Google Analytics