直接上代码：
<!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都已测过），具体原因不明。。。
- ul.rar (33.8 KB)
- 描述: jquery.pseudo.js
- 下载次数: 108
分享到：
相关推荐
jquery.pseudo.js 文件，当初上传好像是兼容IE8
jquery 支持文件,本身提供一些效果与事件，核心技术很简单，却可以实现，非常好的效果。。
jQuery：伪 动态更新伪元素CSS属性。 该插件是根据需要以无法通过单个类解决的灵活方式更新伪元素而创建的。 这样的用例可能是： 响应用户输入（鼠标，触摸等）， 基于变量进行动画和 在内容以外的其他属性中...
伪选择.js <!-- your pseudoSelect theme --> < link rel =" stylesheet " type =" text/css " href =" /path/to/pseudoselect.css " > <!-- jQuery --> < script src =" ...
该插件通过向jQuery对象添加一组自定义的伪选择器（pseudo-selectors），使得开发者能够方便地通过简单的选择器来判断元素是否在视窗的可视区域内，或者是部分在视窗内、部分在视窗外，以及元素是否具有滚动条等。...
CSS伪元素：before和after伪元素的使用和应用 CSS中的伪元素（Pseudo Element）是一种特殊的HTML元素，用于在文档树中添加虚拟元素，以便实现特定的样式或布局效果。在CSS中，有两种常用的伪元素：:before和:after...
例如，我们可以使用JavaScript将content内容添加到需要设置js效果的元素上，然后使用CSS来定义样式.change:before{content: attr(data-beforeData);color: red;}。 方法四：添加样式表 添加样式表是一种常见的方法...
**jQuery Validation插件**是jQuery库的一个扩展，用于表单验证。它提供了强大的功能，允许开发者自定义验证规则和错误处理方式。在这个话题中，我们将深入探讨如何利用jQuery Validation插件来支持自定义错误样式。...
通过CSS3的新特性，如过渡（transition）、动画（animation）和伪类（pseudo-classes），可以实现桌面元素的平滑动画效果和交互反馈。 三、jQuery Desktop架构 1. 桌面背景：通常使用一张大图作为背景，通过CSS实现...
- 诸如`:before`和`:after`等伪元素在早期的IE版本中不支持，但在IE9及更高版本中才开始支持。 为了确保在这些旧版本的IE浏览器中正确渲染页面，开发者通常需要使用条件注释、CSS Hack或者工具如Modernizr来检测...
CSS类也可以使用伪类： selector.class:pseudo-class {property:value;} anchor伪类 在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示 实例 a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {...
这些伪类让开发者能更精细地控制元素在不同状态下的样式，提升用户体验。 **CSS伪元素（Pseudo-elements）**： 伪元素与伪类相似，但它们不是状态，而是用于代表元素的一部分，比如`::before`和`::after`可以分别在...
在这个名为“前端开源库-pseudo-classes.zip”的压缩包中，很可能是包含了关于如何在各种开源前端库中使用和实现伪类的相关示例或代码库。虽然没有具体的标签提供更多信息，但我们可以深入探讨一下伪类在前端开发中...
- IE3 将 `:link` 伪类的样式表属性作用于 `:visited` 伪类。 - 默认情况下，已访问过的链接颜色由浏览器自行决定。 - 定义网页过期时间或用户清除浏览历史记录将影响此伪类的作用。 - 对于没有 `href` 属性的 `<a>`...
利用CSS伪元素 ：before 和 ：after 可以在文档前后插入内容而不改变文档原有结构，再配合 box-shadow 可以实现很炫的效果, 下面就展示三个例子： 1、利用 :before 和 :after 添加背景，比如给一段文字前后打引号...
同时，利用CSS3的新特性，如过渡（transition）、动画（animation）和伪类（pseudo-class），可以实现平滑的过渡效果和动态交互，提高用户界面的吸引力。例如，使用`:hover`伪类可以为鼠标悬停在分类项上时添加视觉...
在实际应用中，`pseudo-elements`与CSS的其他规则结合使用，如`display`, `position`, `background`, `font`, `color`等，能创造出丰富的页面效果。例如，使用`:hover`或`:active`伪类可以实现鼠标悬停或点击时`...