Thank you for reading...
2007/01/23 21:11
1.子选择器
IE6及更低版本不支持子选择器,这个例子就对IE5-6/Win隐藏透明的背景PNG图像。IE7支持子选择器,因此在IE7中也有效。
html>body{background-image:url(bg.png)}
2.属性选择器
现代浏览器(Safari,Firefox)均支持属性选择器,但IE6及更低版本不支持。以下示例使用属性选择器在符合标准的浏览器中将背景png应用于内容。
div[id="content"]{background-image:url(bg.png)}
IE的有条件注释
<!-- [if IE]
<style type="text/css">
@import ("ie.css")
</style>
-->
IE5和更高版本会接收样式 表ie.css,其它浏览器只会看到一些被注释掉的文本。
还可以使用有条件注释指定一种特定的浏览器,比如IE5.0:
<!-- [if IE 5]
<style type="text/css">
@import ("ie50.css")
</style>
-->
还可以指定一组浏览器,比如IE5.5和更高版本:
<!-- [if gte IE 5.5000]
<style type="text/css">
@import ("ie55up.css")
</style>
-->
或IE5和IE5.5:
<!-- [if lt IE 6]
<style type="text/css">
@import ("ie55up.css")
</style>
-->
这种方法需要要将注释放在HTML中。
带通过滤器
此方法是Tantek Celik基于浏览器解析错误创建的一系列过滤器(http://tantek.com/css/Examples/),允许使用@import规则将样式表提供给选择的浏览器。
将CSS传递给IE5和5.5
@media tty{
i{content:"\";/*" "*/}} @import 'ie5x.css'; /*";}
}/* */
符合标准的浏览器看到的是
@media tty{
i{content:"Blah, blah blah";}
}
实际上会忽略整个规则。
但是在IE 5.x不理解转义字符,最终应用@import规则,读取了ie5x.css。
另一种方法:
/*\*//*/
@import "ie5mac.css";
/**/
IE5下看到的是:
/* blah */
@import "ie5mac.css";
/**/
其它浏览器正确地忽略转义的元素,看到:
/* blah *//*
blah
*/
阅读《CSS Mastery:Advanced Web Standards Solutions》,中文名《精通CSS-高级Web标准解决方案》中,以上是阅读笔记,加以自己的理解和说明,只记录偶觉得重要、容易遗忘及原先不知道的知识。
IE6及更低版本不支持子选择器,这个例子就对IE5-6/Win隐藏透明的背景PNG图像。IE7支持子选择器,因此在IE7中也有效。
html>body{background-image:url(bg.png)}
2.属性选择器
现代浏览器(Safari,Firefox)均支持属性选择器,但IE6及更低版本不支持。以下示例使用属性选择器在符合标准的浏览器中将背景png应用于内容。
div[id="content"]{background-image:url(bg.png)}
IE的有条件注释
<!-- [if IE]
<style type="text/css">
@import ("ie.css")
</style>
-->
IE5和更高版本会接收样式 表ie.css,其它浏览器只会看到一些被注释掉的文本。
还可以使用有条件注释指定一种特定的浏览器,比如IE5.0:
<!-- [if IE 5]
<style type="text/css">
@import ("ie50.css")
</style>
-->
还可以指定一组浏览器,比如IE5.5和更高版本:
<!-- [if gte IE 5.5000]
<style type="text/css">
@import ("ie55up.css")
</style>
-->
或IE5和IE5.5:
<!-- [if lt IE 6]
<style type="text/css">
@import ("ie55up.css")
</style>
-->
这种方法需要要将注释放在HTML中。
带通过滤器
此方法是Tantek Celik基于浏览器解析错误创建的一系列过滤器(http://tantek.com/css/Examples/),允许使用@import规则将样式表提供给选择的浏览器。
将CSS传递给IE5和5.5
@media tty{
i{content:"\";/*" "*/}} @import 'ie5x.css'; /*";}
}/* */
符合标准的浏览器看到的是
@media tty{
i{content:"Blah, blah blah";}
}
实际上会忽略整个规则。
但是在IE 5.x不理解转义字符,最终应用@import规则,读取了ie5x.css。
另一种方法:
/*\*//*/
@import "ie5mac.css";
/**/
IE5下看到的是:
/* blah */
@import "ie5mac.css";
/**/
其它浏览器正确地忽略转义的元素,看到:
/* blah *//*
blah
*/
阅读《CSS Mastery:Advanced Web Standards Solutions》,中文名《精通CSS-高级Web标准解决方案》中,以上是阅读笔记,加以自己的理解和说明,只记录偶觉得重要、容易遗忘及原先不知道的知识。
2007/01/23 20:47
1.星号HTML
HTML元素是网页上的根元素,但IE7以下的版本有一个匿名的根元素,因此需要用* html来指定。
a:hover{border:1px dotted black;}
* html a:hover{border-style:solid;}
2.IE/Mac注释反斜线
IE5错误地允许在注释内部进行转义,其它浏览器都会这个转义,并且应用后面的规则。但是,IE5/Mac会认为注释仍然没有结束,因些会把下一个结束注释字符串前的所有字符忽略。
/* Hiding from IE5/Mac \*/
#nav a{width:6em;}
/* End Hack */
3.结合了星号HTML和注释反斜线方法,称之为Holly(发明人:Holly Bergevin)。
通过这两个规则,就可以对IE6和更低版本应用规则:
/* Hiding from IE5/Mac \*/
* html{height:1px;}
/* End Hack */
可参考站:http://www.positioniseverything.net
4.!important和下划线方法
#nav{position: fixed !important;
position: static;
}
IE4-6会忽略第一个声明并且应用第二个,其它浏览器则应用第一个声明,因为它使用了!important关键字,这提高了此规则在层叠中的优先级。
下划线方法与!important相似,IE6及更低版本会忽略下划线,因此应用第二个声明。
#nav{position: fixed;
_position: static;
}
阅读《CSS Mastery:Advanced Web Standards Solutions》,中文名《精通CSS-高级Web标准解决方案》中,以上是阅读笔记,加以自己的理解和说明,只记录偶觉得重要、容易遗忘及原先不知道的知识。
HTML元素是网页上的根元素,但IE7以下的版本有一个匿名的根元素,因此需要用* html来指定。
a:hover{border:1px dotted black;}
* html a:hover{border-style:solid;}
2.IE/Mac注释反斜线
IE5错误地允许在注释内部进行转义,其它浏览器都会这个转义,并且应用后面的规则。但是,IE5/Mac会认为注释仍然没有结束,因些会把下一个结束注释字符串前的所有字符忽略。
/* Hiding from IE5/Mac \*/
#nav a{width:6em;}
/* End Hack */
3.结合了星号HTML和注释反斜线方法,称之为Holly(发明人:Holly Bergevin)。
通过这两个规则,就可以对IE6和更低版本应用规则:
/* Hiding from IE5/Mac \*/
* html{height:1px;}
/* End Hack */
可参考站:http://www.positioniseverything.net
4.!important和下划线方法
#nav{position: fixed !important;
position: static;
}
IE4-6会忽略第一个声明并且应用第二个,其它浏览器则应用第一个声明,因为它使用了!important关键字,这提高了此规则在层叠中的优先级。
下划线方法与!important相似,IE6及更低版本会忽略下划线,因此应用第二个声明。
#nav{position: fixed;
_position: static;
}
阅读《CSS Mastery:Advanced Web Standards Solutions》,中文名《精通CSS-高级Web标准解决方案》中,以上是阅读笔记,加以自己的理解和说明,只记录偶觉得重要、容易遗忘及原先不知道的知识。






