关于ie下 line-height 不兼容，采用margin-top解决办法

最新推荐文章于 2022-09-08 16:12:48 发布
最新推荐文章于 2022-09-08 16:12:48 发布
阅读量3.9k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youmypig/article/details/38418895
版权

ie下 对图片等非文字元素设置了line-height会失效。导致和他在一行的文字居中，但是图片不垂直居中。采用以下方法：

line-height:0px;margin-top:10px;

先设置图片的lin-height:0px;防止其他浏览器增高

设置顶端距离


youmypig
关注
html兼容ie7ie8,解决IE6、IE7、IE8样式不兼容问题
weixin_34873798的博客
06-27 1130
这里和大家探讨一下解决IE6、IE7、IE8 DIV错位问题，如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，非常方便。IE6里DIV错位的问题采用”FLOAT：LEFT“的DIV在IE8、IE7、都没问题，IE6下却向下移动，出现空白。这是因为，IE6采用的内核默认把DIV之间的距离增加...
css行高line-height的一些深入理解及应用
lomenw的博客
09-22 2871
一、前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”，是个不错的文章。 这里，我也要讲讲我对line-height的一些理解，所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的，可以说是补充或是另外一个角度的思考。另外，将结合实际，展示line-height的一些特性和一些常见应用，帮助您对css行高line-height的理解。所讲述的并不
垂直居中问题不只有 line-height 可以解决，还有一个哥们叫 margin-top
07-12 152
我们都知道，对于一行文本的垂直居中可以通过设置 height 与 line-height 值相等来实现。 那么对于两个嵌套的div ，或者一个div中的多行文本，怎么让被包含的部分实现垂直居中呢？显然，通过 line-height 没法实现。 其实，实现原理就是用外层div的高度减去内层 div 的高度，除以2之后，给内层div设置margin-top值就可以了。 假如页面上内层d...
IE兼容-line-height
iteye_6992的博客
03-07 337
    在ie6下，当元素设置了height值和line-height值时，元素的实际高度按两者中大的那个来定的。而在其他浏览器中元素的高度只与height值有关，line-height的值只会影响元素中内容如文字在元素中的位置。 示例代码如下： <style> div{   height:30px;  line-height:40px;  width:40px;  bord...
【转】IE6下Line-height失效问题
qiandundiandi的专栏
08-27 337
总是会遇到图片与文字并排，在IE6及更低版本浏览器下行高失效的问题。 首先，我们来看一下原因： IE下line-height属性失效是由于文字中包含img、input、select、textarea、button、object等标记造成的。或者也可以说是在line-height的元素里的文字，同时有了block或者是inline-block元素导致的。 解决办法： 对和文字
【IE】IE对line-height 失效的的解决方式
Draco
04-25 6966
微软的IE9 + Extjs3.1 确实头疼，在使用了line-height:20px 的Tree的样式，但是一直没有生效， 下面给出3中解决方案： 方案1、加padding-top： 文字 字 方案2、加overflow:hidden： 文字字 方案3、设置字体为微软雅黑或者宋体 font-family: Microsoft YaHei,Arial,
IE11中使用vh/vw作为单位会使line-height失效？
李菇凉的博客
03-23 692
在IE浏览器测试中发现line-height使用vh作为单位失效的问题，后来加了display:-ms-flexBox后得到解决。 .title{ display:-ms-flexBox; line-height: 9.1vh; }
css浏览器不兼容原因分析及解决办法第1/2页
10-30
而mirror margin bug是另一个特定于IE6的问题，当外层元素内有浮动元素时，外层元素的margin-top会自动生成一个相同的margin-bottom。解决这个问题的方法是为外层元素设定一个border或设定float属性。 IE6还有一个...
IE6,IE7,FF等浏览器不兼容原因及解决办法
12-24
### IE6、IE7、Firefox等浏览器不兼容的原因及解决办法 #### 一、引言 随着Web技术的发展，浏览器的兼容性问题一直是前端开发者面临的重要挑战之一。尤其是在早期的Web开发时代，如IE6、IE7以及较早版本的Firefox等...
IE6兼容性问题及IE6常见bug详细汇总
12-13
解决方法：避免使用奇数字体大小，将line-height设为偶数值，或使用padding-top代替line-height进行垂直居中。 4. **内部盒模型超出父级问题** 当元素内容超出其父元素边界时，父元素会被撑大。 解决方法：为父...
IE中发生line-height属性的bug
一步一步学习javascript;关注web标准
02-14 4904
发生情况:当在一个标签中套入img,input,textarea,select,object等元素的时候会发生.如在body中设置line-height:80px;然后body中<p>有文字有img,有input...这个bug就发生了,在ie下的line-height会缩小了,但在ff和opera是正常的,于是我们为了解决这个办法需要单独给ie设置样式;简单的css样式:
HTML_margin-top兼容问题解决方法
weixin_33912638的博客
09-01 340
2019独角兽企业重金招聘Python工程师标准>>> ...
IE6行高line-height失效问题方法详解
妈妈说：吃得苦中苦，方为人上人。
08-03 1832
以前做面面IE6行高问题,总出.但为了省时间,都改用PADDING撑起来去解决了....就直接不用行高解决.今天有空又在网上查了查.总结一下解决方法!因为li中加入图片，会导致line-height失效如:当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效； 同时以上元素的行高可能×2：受影
IE浏览器不支持after()和before()等追加HTML元素方法解决办法
My note
09-08 924
做项目过程中遇到一个需要插入HTML元素标签的功能，然后发现在谷歌浏览器可以正常显示，但是在IE浏览器却没有效果。原来一查才知道IE浏览器不支持element.after(para)方法，经过研究发现，IE虽然不支持.after()方法，但可以支持.appendChild()方法（所有的浏览器都支持该方法）
那些年，我与IE的爱恨别离（一）
weixin_46538895的博客
06-28 157
项目要求兼容ie8+，开发过程中遇到的问题，记录下来，有需要的人自取！ 故事1： ie11以下，line-height失效，如果你的代码是i、img、span等标签同时存在一行的话，使用vertical-align:middle同样可以达到目的，去除line-height属性，这样便能非常奈斯的兼容ie8+； 故事2： ajax在ie11以下同样会无响应，浏览器会默认阻止，乱七八糟的安全协议吧，在ajax请求前添加jQuery.support.cors = true ;便可成功拿到数据！ ...
在IE和Firefox中背景图片高度自适应的兼容问题
aideehorn
07-20 219
在IE和Firefox中背景图片高度自适应的兼容问题 例如：(其中floatA、floatB的属性已经设置为float:left;) &lt;#div id="floatA" &gt;&lt;/#div&gt; &lt;#div id="floatB" &gt;&lt;/#div&gt; &lt;#div id="NOTfloatC" &gt;&lt;/
【IE】IE对line-height 失效的的解决方案
weixin_33836874的博客
05-12 1303
微软的IE9 + Extjs3.1 确实头疼。在使用了line-height:20px 的Tree的样式，可是一直没有生效， 以下给出3中解决方式： 方案1、加padding-top： &lt;div style="height:22px;line-height:22px; padding-top:3px;background:red;color:#FFFFFF;font-siz...
各浏览器私有前缀-兼容行高line-height
信念堤岸
02-25 6761
line-height: 35px\9; /*IE8*/    *line-height: 35px; /* IE7支持 */     _line-height: 35px; /* IE6支持 */     -ms-line-height: 35px;/*IE9+支持*/    -webkit-line-height: 1; /*chrome safair*/    -moz-line-
解决IE浏览器CSS兼容性问题汇总
"这篇文章总结了在IE浏览器下遇到的一些CSS问题及相应的解决方案，包括文字大小不兼容、容器高度限定、横向撑破容器、double-margin bug和mirror margin bug等。" 在设计网页时，IE浏览器（尤其是旧版本）的CSS渲染...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值