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

!important在ie7.0的hack方法

    博客分类:
  • CSS
阅读更多

英文原文地址: http://www.ibloomstudios.com/article7/

由于ie对!important识别存在bug,而现在大部分网页标准设计师又通过这个bug来兼容ie和ff,但是ie7.0把这个bug给修复 了,所以问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和ff?正所谓"上有政策,下有对策",国外的网页标准设计师通过使用css filter的办法(并不是css hack)来兼容ie7.0,ie6.0和ff,以下为我从国外网站的翻译.

新建一个css样式如下:

#item {
    width: 200px;
    height: 200px;
    background: red;
}

新建一个div,并使用前面定义的css的样式:

<div id="item">some text here</div>

在body表现这里加入lang属性,中文为zh:

<body lang="en">

现在对div元素再定义一个样式:

*:lang(en) #item{
    background:green !important;
}

这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:

#item:empty {
    background: green !important
}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上,并在以下浏览器和操作系统下通过测试:

ie7 beta 2 preview/win
ie5.01+/win
firefox 1.5/win
opera 8.5/win & linux
netscape 7.01, 8/win
mozilla 1.7.12/win & linux
safari 2/mac
firefox 1.0.4/linux
epiphany 1.4.8/linux
galeon 1.3.20/linux

按照远作者的说法其实这不能算是一种hack,应该属于filter,不过这似乎并不是最重要的,因为通过这个办法,我们又一次了解决IE6.0,IE7.0和其他浏览器之间的兼容性问题,而且使用:lang-filter这办法,在今后的一段时间内都会有用

分享到:
评论

相关推荐

    css中!important的作用(IE6 IE7 FF)及其原理

    important这个规则对Ie6.0,Ie7.0和Firefox能写hack,现在就来讲解这是什么原理: *对于Ie系列浏览器都能够识别, firefox 浏览器则不能识别; !important只有Ie7.0和firefox可以识别,但是Ie6.0不能成功应用. (1)...

    css中提升优先级属性!important的用法总结

    !important只有Ie7.0和firefox可以识别,但是Ie6.0不能成功应用.!important提升优先级,下面对它的用法做下总结

    !important用法使用介绍

    important只有Ie7.0和firefox可以识别,但是Ie6.0不能成功应用. (1)区别ie与firefox的hack为: border:2px solid #f00; *border:1px solid #f00; (2)区别Ie6.0 与Ie7.0、firefox的hack为: border:1px solid #f00...

    CSS优先级和!important与IE6的BUG讨论及解决方案

    important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了。本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题,而且是支持...

    css hack 兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0 浏览器兼容教程

    important了,是件好事情,但是也给广大的在IE6时代使用!important来区分处理IE和FF的网页制作者带来了不少问题,Noker也碰到了这个问题,所以翻阅网上资料,写了下面这个能够兼容现今大多数主流浏览器,覆盖绝大...

    通过jquery修改带有!important的样式

    在工作中碰到这样一种情况: a. 页面上有一个a标签; b. 此a标签已经被外链css定义了background, 并且background中用了!important; c. 无权限对外部CSS进行修改 需求:点击a, 换background

    CSS hack技巧大全

    可是,大家注意一 下,IE6只是在某些情况下不识别(ie6下,同一个大括号里对同一个样式属性定义,其中一个加important 则important标记是被忽略的,例:{background:red!important; background:green;} ie6下解释为...

    CSS兼容IE6,IE7和FF的总结 .

    CSS兼容IE6,IE7和FF的总结 . 区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; ...

    react-embedded-animations:React库可在嵌入式体验中使用动画,其中需要在CSS中使用!important

    React库可以在嵌入式体验上使用动画,而CSS中需要使用!important。 什么时候使用 在大多数情况下,不应使用该库,仅在以下情况下使用: 如果需要在动画CSS上使用!important 安装 npm install --save react-...

    CSS !important 的使用

    NULL 博文链接:https://onestopweb.iteye.com/blog/2314203

    CSS 完美兼容IE6/IE7/FF的通用hack方法

    important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)&lt;style&gt;#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}&lt;/style&gt; 2, IE6/IE77对FireFox *+html 与 *...

    原来CSS里的 !important 是如此用法

    css下!important效果演示代码

    IE6支持!important吗 如何用!important解决浏览器兼容性问题

    "!important"是什么? 第一个,是设置样式的优先级,设了!important的样式的属性优先于id...第二个,可以利用它让页面效果在ff等浏览器上和ie6效果更相同。因为不同的浏览器有自己默认的样式,所以你设一个样式在不同

    如何使用jquery修改css中带有!important的样式属性

    important的样式属性 外部样式为: div.test{ width:auto !important; overflow:auto !important } 通过 $(“div.test”).css(“width”,”100px”);和 $(“div.test”).css(“width”,”100px !important”);是...

    针对主流浏览器的CSS-HACK写法及IE常用条件注释

    本文,青鸟将为你总结CSS针对各浏览器的兼容HACK(以IE6/IE7/IE8 /FF为主),以及IE特有的条件注释使用方法.一、通用区分方式:IE6、IE7能识别*,标准浏览器(如FF)不能识别*;IE6能识别*,但不能识别 !important;IE7...

Global site tag (gtag.js) - Google Analytics