1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 对ie6 ie7 ff兼容性的详细css hack介绍

对ie6 ie7 ff兼容性的详细css hack介绍

时间:2024-02-21 20:09:31

相关推荐

对ie6 ie7 ff兼容性的详细css hack介绍

这个毛病把我憋了好久了,最近到底找到了解决滴方式,通过偶测试系完整ok滴,和大伙儿共享。

以下为引佣:

如今偶大多数全是用!important来hack,关于ie6和firefox测试可以正常卖弄,可是ie7对!important可以准确说明,会导致页面没按哀求卖弄!搜查了一下,找到1个针对ie7还可以滴hack办法不外乎运用“*+html”,如今用ie7浏览一下,该当没有问题了。

如今写1个css可以这么:

#example{color:#333;}/*moz*/

*html#example{color:#666;}/*ie6*/

*+html#example{color:#999;}/*ie7*/

那么在firefox下字体色彩卖弄为#333,ie6下字体色彩卖弄为#666,ie7下字体色彩卖弄为#999,他们全互不扰乱。偶真渴望那个ie6快点退休......

css

hacks,css样子表补丁.用于校改xhtml代码设计滴网页模板布置,某些层滴溢出问题,hacks发源:,这个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

中失效。固然csshack

不推选运用,前提诠释才是万无一失滴过滤器,可是前提诠释只能出如今

html中,csshack还是有用武之地滴。nanobot发觉了有些针对ie7滴

csshack,具体不外乎:

>body

html*

*+html

这三种写法,其中前两种全是不合法滴css

写法,在尺度兼容浏览器中被被忽视,可是ie7却不这样以为。关于

>body,它会将缺失滴选择符用全局选择符*

取代,也就是将其处置成了*>body,并且不光关于>选择符,+,~

选择符中这个现象也存在。关于html*,因为html和*

证明没有空格,因此也是一种css语法故障,但ie7

怎么会忽视,而是故障地以为这里有一个空格。关于第三种*+html,ie7以为

html前面滴dtd声明也是1个元素,因此html

会被选中,这三种方式中只要这一种方式系合法滴css

写法,也就是说可以经过校验器滴验证,因而也是笔者推选滴hack

用法。

结尾笔者给出了最佳办法:

ie6andbelow

use*html{}toselectthehtmlelement.

ie7andbelow

use*+html,*html{}toselectthehtmlelement.

ie7only

use*+html{}toselectthehtmlelement.

ie7andmodernbrowsersonly

usehtml>body{}toselectthebodyelement.

modernbrowsersonly(notie7)

usehtml>/**/body{}toselectthebodyelement.

theie7csshack(!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,以下为笔者从国外网站滴翻译.

新建1个css样子如下:

插入编码:

#item{

width:200px;

height:200px;

background:red;

}

新建1个div,并运用前面定义滴css滴样子:

插入编码:

<divid="item">sometexthere</div>

在body体现这里参加lang属性,汉语为zh:

插入编码:

<bodylang="en">

如今对div元素再定义1个样子:

插入编码:

[/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各版本以外滴浏览器上,并在以下浏览器和操作系统下经过测试:

ie7beta2preview/win

ie5.01+/win

firefox1.5/win

opera8.5/win&linux

netscape7.01,8/win

mozilla1.7.12/win&linux

safari2/mac

firefox1.0.4/linux

epiphany1.4.8/linux

galeon1.3.20/linux

screenshotoftheie7csshackinie7

screenshotoftheie7csshackinfirefox1.5

遵照远笔者滴说法其实这不可算是一种hack,该当归属filter,不过这仿佛并非最重要滴,由于经过这个方法,咱们又一次了解决ie6.0,ie7.0和其余浏览器证明滴兼容性毛病,并且运用:lang-filter这方法,在今后滴一段时间内全会有用.

可是偶最近又找到了此外一种新滴css

hack方法,这个方法既单纯又适用。

方法不外乎:

.名称{

background-color:red!important;/*ff*/

>

background-color:black

!important;/*ie7.0*/>

background-color:green;

/*ie6.0*/

}

偶曾经在ie6.0

ie7.0和ff中测试经过

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。