`
123003473
  • 浏览: 1040524 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

IE6、IE7、IE8、FireFox css line-height兼容问题

阅读更多
针对firefox ie6 ie7 ie8的css样式中的line-height属性,以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对!important可以正确解释,会导致页面没按要求显示!这些细节却往往影响了整个页面样式的美观性。搜索了一下,找到了一个针对IE7、IE8不错的hack方式,IE7使用*+html或*line-height: 方式。大概的总结如下:

CSS可以参照如下定义,注意顺序:
#menu { line-height: 23px; }  /* firefox 浏览器实行这句定义 */
#menu { line-height: 26px\9; }/*ie6,ie7,ie8 这句定义主要尖对IE8来hack*/
#menu { *line-height: 23px; } /*ie6,ie7 这句定义主要尖对IE7来hack*/
#menu { _line-height: 23px; } /*ie6 浏览器优先实行这句定义*/ 或者写成一句

#menu { line-height:23px; line-height: 26px\9; *line-height: 23px; _line-height:23px; } 或者

* html #menu { line-height: 23px; } /* IE6 浏览器实行这句定义 */
*+html #menu { line-height: 23px; } /* IE7 浏览器实行这句定义*/
分享到:
评论

相关推荐

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

    在css设置中,我们一般用行高line-height来设定某一行的高度,这在ie7与firefox等浏览器都适用。但当行中有其他元素时(如图片,SPAN,li..)在IE6.0下line-height会不起效果,后来查了下资料,果然如此,资料如下: ...

    针对firefox ie6 ie7 ie8的css样式hack

    针对firefox ie6 ie7 ie8的css样式hack 以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对!important可以正确解释,会导致页面没按要求显示!搜索了一下,找到了一个针对IE7...

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

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

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

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

    Firefox专属hack的写法介绍

    important就能够零丁给firefox做hack了,可是此刻多了ie八、opera、chrome等这些个所说的规范浏览器后,firefox能熟悉的工具它们都熟悉,偏生firefox有个致命的bug就是不撑持input的line-height属性,于是我又犯合计了,...

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

    1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width ...5、在mozilla firefox和IE中的BOX模型解释不一

    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;}</style...

    css技巧:经典CSS使用技巧几则

    MacJi “偷懒”翻译了部分,下午冒着被 BOSS 开除的危险将其补完(原文链接)。 使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可...始终让 Firefox 显

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

    其它请参考:CSS hack 针对IE6,IE7,firefox显示不同效果 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行...

    css+div的一些易错点小结

    开发尽量不要用margin和padding属性,因为在不同浏览器下效果会不同,建议使用line-height,如果一定要用,要注意在IE6和IE7与其他的浏览器的效果不同。在用的过程中如遇到问题,可以在百度里搜一下hack,里面会介绍...

    CSS网页制作 表单button的行高问题

    表单button的行高问题 下面我们先来看一个Demo的实例: ...复制代码代码如下: <input type=”submit” id=”button” value=”engage”/> CSS Code ...多效果图中,明显的告诉我们,在Firefox和O

    input 文本框 文字垂直居中对齐 ie firefox

    在ie中文字垂直居中对齐的话 在css中把line-height的属性设置成height的高度即可。但在ff中似乎不管用。

    基于jQuery的网页右下角弹出广告(IE7,firefox)

    演示代码: 测试 .divCss{ bottom:0; display:block; height:25px; overflow:hidden; padding:0;...height:200px;...height:25px;...line-height:25px; text-align:right; margin:0px; background:#999999

    前端css+html+布局笔记

    详尽的前端笔记,包含html和css部分,由xmind8做的笔记。css部分:编写的位置 1.内联样式 将样式编写到标签的style属性中 ;"> 这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用...

    css3 线性渐变和径向渐变示例附图

    线性渐变:ie6以下不兼容 径向渐变:只支持firefox、Chrome和Safari 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html” charset=”...

    web实验报告.doc

    掌握文本控制相关的属性 掌握CSS属性继承的概念并能够合理应用 掌握背景控制相关的CSS属性 掌握列表相关的CSS属性 熟悉Chrome/Firefox开发人员工具中CSS相关功能的使用 了解常见的CSS设计技巧(CSS Hacks)和设计...

    WPTools.v6.29.1.Pro

    ************ WPTOOLS 6 History ************ ********** http://www.wpcubed.com ********* **** Copyright (C) 2012 J. Ziersch and **** **** WPCubed GmbH, Munich, Germany ******** ************************...

Global site tag (gtag.js) - Google Analytics