CSS hack几个新的标识符 - 区分IE7、IE6、FF和Opera

bobo

金牌亭友

恋人: 寻觅中

Rank: 15

终身成就奖荣誉会员大富翁勋章

获赠礼品

1^# 大中小发表于 2008-3-29 13:35 只看该作者

CSS hack几个新的标识符 - 区分IE7、IE6、FF和Opera

1、!ie
IE7修复了!important这个区分IE、FF等很爽的hack，现在只能用它对付IE6及以前的版本了。同时，人们也发现了IE7的BUG，就是这个 !ie,其适用于（这里的“适用于”是“……能够认识”的意思，下同）IE7及以前版本，也就是说，这个!ie能区分目前的IE和其他浏览器，不敢保证未来的IE版本是否修复此BUG，当然这样的代码将不符合CSS语法规则。看例子：

<html>
<head>
<title>测试页面</title>
<style type="text/css">
p
{
background: red;
background: green!ie;
}
</style>
</head>
<body>
<p>难道你家的馒头是圆的？(注意IE和FF下背景的不同)</p>
</body>
</html>

2、!important!
虽然IE7修复了!important，但是IE7又继续在这个!important!上栽跟头，注意后面有个感叹号，同样可以利用来区分目前市面上的IE和其他浏览器，代码不符合CSS语法标准。继续拿前面的例子来演示：

<html>
<head>
<title>测试页面</title>
<style type="text/css">
p
{
background: red;
background: green!important!;
}
</style>
</head>
<body>
<p><strong>听说你家的馒头都是圆的？(注意IE和FF下背景的不同)</strong></p>
</body>
</html>

3、!sb,!tmd,!microsoft,!google,!orZ,!r
我被老外忽悠了,并非只有!ie这个特殊字符串，只要是感叹号后面跟个字符串甚至不要跟字符串，都能区别IE和其他浏览器，郁闷，真是尽信老外不如无老外！

<html>
<head>
<title>测试页面</title>
<style type="text/css">
p
{
background: red;
background: green!;/*看看这个页面的效果吧，当然感叹号后面可以跟一些字符串除了"important"*/
}
</style>
</head>
<body>
<p><strong>听说你家的馒头都是圆的？(注意IE和FF下背景的不同)</strong></p>
</body>
</html>

4、html*
*html，和html>body，_height:10px，*height:10px，这几个hack应该不算是陌生的东西了，而这个html*还是个比较有意思的！需要注意html和后面的*号之间不能有空格。例如：

<html>
<head>
<title>测试页面</title>
<style type="text/css">
html*{
border:3px solid #066;
padding:4px;
display:block;
background:#999;
}
p
{
background: red;
}
body{
background:#fff;
}
</style>
</head>
<body>
<p>我还没有吃晚饭，你吃了吗？--摘自和某MM的聊天记录</p>
<p>物理学家指出：由于受到地心引力的影响，在常规的环境下要制造出绝对圆（球）形的物体是不可能的</p>
</body>
</html>

这里面会出现一个新的非常有意思的问题，就是对注释的不同解释~。

参考文章：
CSS Hacks: http://www.webdevout.net/css-hacks
IE’s universal selector is really universal:http://www.stilbuero.de/2006/09/17/ies-universal-selector-is-really-universal/

人生若只如初见...

TOP

‹‹ 上一主题 | 下一主题 ››