!important在ie7.0的hack方法_CSS/HTML

由于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这办法,在今后的一段时间内都会有用 。

时间: 2024-12-22 11:11:35

!important在ie7.0的hack方法_CSS/HTML的相关文章

important在ie7.0的hack方法

由于ie对!important识别存在bug,而现在大部分网页标准设计师又通过这个bug来兼容ie和ff,但是ie7.0把这个bug给修复了,所以问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和ff? 正所谓"上有政策,下有对策",国外的网页标准设计师通过使用css filter的办法(并不是css hack)来兼容ie7.0,ie6.0和ff,以下x2hu从国外网站的翻译. 新建一个css样式如下 程序代码#item {    width: 200px;    heigh

关于!important在ie7.0的hack方法

由于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; bac

IE7.0以下版本列表li中的元素错位一个上一个下的解决方法

在IE7.0以下time元素与a元素错位,一个在上,一个在下.导致的原因是这种情况下span-time元素的margin-top会自动增加20px左右,具体的解决方法如下,感兴趣的朋友可以参考下   HTML: 复制代码 代码如下: <li><span class="tag">[${ross.parentName}] </span><a href="../ShowNews?id=${ross.newsID}">${ro

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法_经验交流

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0兼容CSS Hack代码范例

css IE7.0简体中文正式版终于发布了,对于我等常和网页打交道的人来说网页兼容性问题也随之而来了.IE7.0有一个显著的改变就是支持!important了,是件好事情,但是也给广大的在IE6时代使用!important来区分处理IE和FF的网页制作者带来了不少问题,Noker也遇到了这个问题,所以翻阅网上资料,写了下面这个能够兼容现今大多数主流浏览器,覆盖绝大多数用户的Hack代码,发布在自己的论坛上,供大家查看,研究,取用.如有相关问题欢迎跟贴探讨,谢谢! 兼容浏览器版本:IE5.0,IE

CSS&amp;nbsp;Hack代码范例:兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、

本CSS Hack代码范例,可以直观显示各个版本浏览器hack的使用.兼容IE5.0.IE5.5.IE6.0.IE7.0.FF1.5.FF2.0. IE7.0简体中文正式版发布了,对于我等常和网页打交道的人来说网页兼容性问题也随之而来了.IE7.0有一个显著的改变就是支持!important了,是件好事情,但是也给广大的在IE6时代使用!important来区分处理IE和FF的网页制作者带来了不少问题,Noker也遇到了这个问题,所以翻阅网上资料,写了下面这个能够兼容现今大多数主流浏览器,覆盖绝

网页:完美兼容IE6/IE7/FF的通用方法

网页 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)<style>#wrapper{width: 100px!important; /* IE7+FF */width: 80p

[转]CSS完美兼容IE6/IE7/FF的通用方法

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width:

IE6.0/IE7.0/IE8.0 的CSS-HACK写法与注释

ie6.0/ie7.0/ie8.0. 为了让所写代码在各主流浏览器中正常运行,我们不得不为各种浏览器写对应的样式.本文,博主将为你总结css针对各浏览器的兼容hack(以ie6/ie7/ie8 /ff为主),以及ie特有的条件注释使用方法. 一.通用区分方式: ie系列可识别 9 ; ie6.ie7能识别*,标准浏览器(如ff)不能识别*: ie6能识别*,但不能识别 !important: ie7能识别*,也能识别 !important: ie8能识别,不能识别*,+,_,* 加!import