Bug,我们可以采用!important来解决这个问题,
!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权。语法格式{ sRule!important },即写在定义的最后面,如:例:box{color:red !important;} IE不能认识!Important,但是其它的浏览器都认识此标识,因此,我们 可以利用这个特性来兼容浏览器,如
.Box{
padding-left:20px !important /*非IE浏览器的*/
padding-left:10px;/*IE浏览器*/
}
但是在IE7.0中又已经可以识别!import了,所以又会出布局的差错问题,那么又该如何去解决了呢?上网搜索了一下,找了些例子来看看,
现在我大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导 致页面没按要求显示!搜索了一下,找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样:
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999,他们都互不干扰。
css Hacks,css样式表补丁.用于修正XHTML编码设计的网页模板布局,某些层的溢出问题,HACKS出处:
www.webdevout.net,这个CSS补丁(hacks)很简单,在样式表中单独为ie7设置某个元素,id或者class前面这 样写:
*:first-child+html #ID{}
或者
*:first-child+html .class{}
别忘掉了前面的*,这个hacks使得DIV+CSS网页模板在ie5+,ie6,ie7,firefox 1.5,firefox 2的浏览器中都可以完美体现原始布局,而不会出现层溢出等问题.
IE7 修复了很多 bug,也增加了对一些选择符的支持,所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用,条件注释才是万无一失的过滤器,但是条件注释只能出现在 HTML 中,CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack,具体就是:
>body
html*
*+html
这三种写法,其中前两种都是不合法的 CSS 写法,在标准兼容浏览器中被被忽略,但是 IE7 却不这么认为。对于 >body ,它会将缺失的选择符用全局选择符 * 代替,也就是将其处理成了 *>body,而且不光对于 > 选择符,+,~ 选择符中这个现象也存在。对于 html* ,由于 html 和 * 之间没有空格,所以也是一种 CSS 语法错误,但 IE7 不会忽略,而是错误地认为这里有一个空格。对于第三种 *+html,IE7 认为 html 前面的 DTD 声明也是一个元素,所以 html 会被选中,这三种方法中只有这一种方法是合法的 CSS 写法,也就是说可以通过校验器的验证,因此也是作者推荐的 hack 用法。最后作者给出了最佳方式:
IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element.
The IE7 CSS Hack(!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;
background: red;
}
新建一个div,并使用前面定义的css的样式:
插入代码:
<div id="item">some text here</div>
在body表现这里加入lang属性,中文为zh:
插入代码:
<body lang="en">
现在对div元素再定义一个样式:
插入代码:
[/code]
*:lang(en) #item{
background:green !important;
}
[/code]
这样做是为了用!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
Screenshot of the IE7 css hack in IE7
Screenshot of the IE7 css hack in Firefox 1.5
按照远作者的说法其实这不能算是一种hack,应该属于filter,不过这似乎并不是最重要的,因为通过这个办法,我们又一次了解决IE6.0,IE7.0和其他浏览器之间的兼容性问题,而且使用:lang-filter这办法,在今后的一段时间内都会有用.
分享到:
相关推荐
CSS种针对浏览器兼容问题的解决方法,平时收集到的一些,希望对大家有所帮助
能全方位的解决浏览器兼容问题,解决ie与ff浏览器的一些棘手问题
直观的标示出浏览器的兼容性,在FF IE SAFAIR PEARS 等浏览器上的条形图
css 多浏览器兼容解决方案 下载,web制作必备。
解决不通浏览器样式(CSS)兼容问题,符合W3C标准。
css多浏览器兼容方案和准则 清除浮动 还有解决兼容问题的一系列方法
CSS浏览器兼容问题,解决各个浏览器中css不兼容的问题。
CSS在浏览器中的兼容性及使用技巧 该文针对网页设计时CSS在浏览器中使用的兼容性问题进行分析,指出了产生问题的原因与解决办法,总结了CSS在不同浏览器中使用的常用技巧
什么是CSS hack: 由于不同的浏览器,对CSS的解析认识不一样,从而导致生成的页面效果不一样,得不到我们所需要的页面效果。... 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。
对于网页设计师来说,浏览器兼容是个令人头疼的难题,本文总结了一些常用的解决此类问题的CSS技术
DIV+CSS解决IE6,IE7,IE8,FF兼容问题
一份对CSS各浏览器兼容解决总结,比较全面
css+div在浏览器中的兼容性问题部分解决办法,word文档,有大纲方便查找
这个很使用,用起来很方便,对于最新的火狐等等其它浏览器的问题都可以解决,
CSS浏览器兼容性的各种代码解决方案
解决各个浏览器样式问题,包括IE6,IE7,FF,等
IE6浏览器兼容问题总结及CSS排版注意地方 列举IE6中10个不得不注意的问题 重构你的代码
不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响...
CSS浏览器兼容问题的解决,可以很好的解决浏览器的兼容问题