jquery.pseudo.js让IE6、七也能用伪类:before
日期：2014-05-16 浏览次数：20544 次
jquery.pseudo.js让IE6、7也能用伪类:before
直接上代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="javascript/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery.pseudo.js"></script>
<title>jquery.pseudo.js模拟CSS伪类:before(解决IE6、7 :before无效)</title>
<style>
html{overflow:auto}
body{font:12px Arial, Helvetica, sans-serif;background:#FFF}
body,h1,h2,h3,h4,h5,h6,p,ul{margin:0}
ul{padding:0}
li{ list-style:none}
.d_a{width:400px;margin:20px auto 0;border:1px solid #BECEEB;padding:3px;background:#CAD5EB;_overflow:hidden}
.u_a{border:1px solid #BECEEB;background:#FFF;padding-bottom:20px;}
.u_a li.u_a_l{margin-bottom:15px;padding:0 5px;}
.u_a_h{font-size:14px;padding:0 10px; border-bottom:1px dashed #BECEEB;line-height:25px;color:#333}
.u_a_a{margin:5px 0 0 5px;}
.u_a_a li{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:21px;_width:95%;}
.u_a_a li:before,.u_a_a li{before: '? ';content: '? ';line-height:20.3px\9;*line-height:21px}
.u_a_a li a{color:#34538B; text-decoration:none}
.u_a_a li a:hover{color:#34538B; text-decoration: underline}
</style>
</head>
<body>
<div class="d_a">
<ul class="u_a">
<li class="u_a_l">
<h2 class="u_a_h">标题1</h2>
<ul class="u_a_a">
<li><a href="#">我是第一条列表信息，叫我小小小小小小小小小小小小小小小小小小小小小小小</a></li>
<li><a href="#">我是第二条列表信息，叫我小小小zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
<li><a href="#">测试证明ul有默认margin、padding</a></li>
<li><a href="#">测试证明li无默认margin,无默认padding</a></li>
<li><a href="#">测试证明li在IE6中不设宽度"text-overflow"无效</a></li>
<li><a href="#">line-height设置之后无需再加height</a></li>
</ul>
</li>
<li class="u_a_l">
<h2 class="u_a_h">标题2</h2>
<ul class="u_a_a">
<li><a href="#">我是第一条列表信息，叫我小小小小小小小小小小小小小小小小小小小小小小小</a></li>
<li><a href="#">我是第二条列表信息，叫我小小小zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</a></li>
<li><a href="#">测试证明ul有默认margin、padding</a></li>
<li><a href="#">测试证明li无默认margin,无默认padding</a></li>
<li><a href="#">测试证明li在IE6中不设宽度"text-overflow"无效</a></li>
<li><a href="#">line-height设置之后无需再加height</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
?
?
效果如图：
?
line-height:20.3px\9
看到这行代码没，这让我很吃惊，px用小数居然也有效！ 而且，20.3px、20.4px、20.2px效果都不一样（IE8都已测过），具体原因不明。。。
?
?
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
