在我印象中一直有这样认为,IE不支持>,那时在写一个效果,要绕过IE5 而不能在IE5所能定义到的a:hover定义样式~不然IE5老是乱跑,本以为用>简单解决掉IE~没想到IE5也"认识",意外的收获
因大家都不用IE5了所以用发图片
www.rotui.net/lab/browser/ie5.gif
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>绕过IE6支持IE5的别一种写法-IE也"支持"> - Beautiful Style « 样式之美 » </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="KEYWords" content="css,xhtml" />
<meta name="DEscription" content="CSS" />
<meta name="author" content="RotUI" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.rotui.net" title="Home" />
<style type="text/css">
/*base*/
body{
margin:8px;
padding:0;
background-color : #efefef;
}
div.w{
max-width:1024px;
min-width:770px;
margin:0 auto;
padding:10px;
border :1px black solid;
background-color : #fff;
}
address.base{
font-style : normal;
}
pre{
line-height:95%;
border :1px black solid;
background-color : #fafafa;
margin:0;padding:10px;
}
#show,#show1,#show2,#show3,#show4,#show5,#show6,#show7,#show8{
width:400px;
margin:20px;
padding:20px;
}
.show1,.show2,.show3,.show4,.show5,.show6{
width:400px;
margin:20px;
padding:20px;
}
*>html #demo1 #test1 #show1
{
background-color : #999;
color:#fff;
}
* html>#demo2 #test2 #show2
{
background-color : #999;
color:#fff;
}
* html#demo8 #test8 #show8
{
background-color : #999;
color:#fff;
}
* html #demo3>#test3 #show3
{
background-color : #999;
color:#fff;
}
* html #demo4 #test4>#show4
{
background-color : #999;
color:#fff;
}
* html #demo5>#show5
{
background-color : #999;
color:#fff;
}
* html #demo6 #show6
{
background-color : #999;
color:#fff;
}
* html #demo7#show7
{
background-color : #999;
color:#fff;
}
*>html .demo1 .test1 .show1
{
background-color : #999;
color:#fff;
}
* html>.demo2 .test2 .show2
{
background-color : #999;
color:#fff;
}
* html .demo3>.test3 .show3
{
background-color : #999;
color:#fff;
}
* html .demo4 .test4>.show4
{
background-color : #999;
color:#fff;
}
* html> .demo5 .test5 .show5
{
background-color : #999;
color:#fff;
}
* html.demo6 .test6 .show6
{
background-color : #999;
color:#fff;
}
.test7.show7
{
margin:20px;border:1px solid #f00;
}
.test8 .show8
{
margin:20px;border:1px solid #f00;
}
@media tty {
i{content:"\";/*" "*/}};#show
{
background-color : #999;
color:#fff;
}
{;}/*";}
}/* */
</style>
</head>
<body>
<div class="w">
<h1>绕过IE6支持IE5的别一种写法-IE也"支持">"</h1>
<address class="base">作者:<a href="http://aoao.rotui.net/" title="RotUI.NET">嗷嗷</a></address><a href="http://www.rotui.net" title="Beautiful Style">首页</a>
<a href="http://www.rotui.net/lab/browser/ie5.gif">保存成图片的样子</a>
<hr />
<p>公共定义</p>
<pre>#show,#show1,#show2,#show3,#show4,#show5,#show6,#show7,#show8{
width:400px;
margin:20px;
padding:20px;
}
.show1,.show2,.show3,.show4,.show5,.show6{
width:400px;
margin:20px;
padding:20px;
}
</pre>
<h2>ID测试1</h2>
<div id="demo1">
<div id="test1">
<div id="show1">*>html #demo1#test1 #show1<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}</div>
</div>
</div>
<h2>id测试2</h2>
<div id="demo2">
<div id="test2">
<div id="show2">* html>#demo2 #test2 #show2<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}</div>
</div>
</div>
<h2>id测试3</h2>
<div id="demo3">
<div id="test3">
<div id="show3">* html #demo3>#test3 #show3<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}</div>
</div>
</div>
<h2>id测试4</h2>
<div id="demo4">
<div id="test4">
<div id="show4">* html #demo4 #test4>#show4<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}</div>
</div>
</div>
<h2>id测试5</h2>
<div id="demo5">
<div id="test5">
<div id="show5">* html #demo5>#show5<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}</div>
</div>
</div>
<h2>id测试6</h2>
<div id="demo6">
<div id="test6">
<div id="show6">* html #demo6 #show6<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}</div>
</div>
</div>
<h2>id测试7</h2>
<div id="demo7">
<div id="test7">
<div id="show7">* html #demo7#show7<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}</div>
</div>
</div>
<p>小结:从5~6~7时~ ID测试567是一样的~应该是IE5把忽略 ></p>
<h2>class测试1</h2>
<div class="demo1">
<div class="test1">
<div class="show1">*>html .demo1.test1 .show1<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}</div>
</div>
</div>
<h2>class测试2 </h2>
<div class="demo2">
<div class="test2">
<div class="show2">* html>.demo2 .test2 .show2<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}</div>
</div>
</div>
<h2>class测试3</h2>
<div class="demo3">
<div class="test3">
<div class="show3">* html .demo3>.test3 .show3<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}</div>
</div>
</div>
<h2>class测试4</h2>
<div class="demo4">
<div class="test4">
<div class="show4">* html .demo4 .test4>.show4<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}</div>
</div>
</div>
<h2>class测试5</h2>
<div class="demo5">
<div class="test5">
<div class="show5">* html> .demo5 .test5 .show5<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}</div>
</div>
</div>
<h2>class测试6</h2>
<div class="demo6">
<div class="test6">
<div class="show6">* html.demo6 .test6 .show6<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}</div>
</div>
</div>
<h2>class测试7</h2>
<div class="test7">
<div class="show7">
<div class="show7">.test7.show7<br />
{<br />
margin:20px;border:1px solid #f00;<br />
} </div>
</div>
</div>
<h2>class测试8</h2>
<div class="test8">
<div class="show8">
<div class="show8">.test8 .show8<br />
{<br />
margin:20px;border:1px solid #f00;<br />
} </div>
</div>
</div>
<h2>原来大家的写法</h2>
<div id="demo">
<div id="test">
<div id="show">@media tty {<br />
i{content:"\";/*" "*/}};#show<br />
{<br />
background-color : #999;<br />
color:#fff;<br />
}<br />
{;}/*";}<br />
}/* */</div>
</div>
</div>
<p>总结 IE5会把忽略">" ,而且跟在html后面如果是ID,连着写IE5也是认识的(见class测试6,id测试8), 虽然IE5不能支持">",可是IE6不认识">" 我们就可以利用IE5 和IE6 对">"的不同解析,用他来绕过IE6.<br />
测试环境:windows2000+IE5, window2000 +IE6, window98升级2K+IE5</p>
</div>
</body>
</html>
总结 IE5会把忽略>, 虽然IE5不能支持>,可是IE6不认识>; 我们就可以利用IE5 和IE6 对>;的不同解析,用他来绕过IE6
posted on 2006-03-23 15:52
汪杰 阅读(289)
评论(0) 编辑 收藏 引用 所属分类:
div css dhtml