`
liuxiang822
  • 浏览: 46737 次
  • 性别: Icon_minigender_1
  • 来自: 常州
社区版块
存档分类
最新评论

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都已测过),具体原因不明。。。

 

 

 

  • ul.rar (33.8 KB)
  • 描述: jquery.pseudo.js
  • 下载次数: 108
分享到:
评论
1 楼 hjf0900380211 2014-07-22  
在ie7下加了before也没有任何效果.....

相关推荐

    jquery.pseudo.js

    jquery.pseudo.js 文件,当初上传好像是兼容IE8

    jquery 支持文件..最新版本

    jquery 支持文件,本身提供一些效果与事件,核心技术很简单,却可以实现,非常好的效果。。

    jquery-pseudo:更新JavaScript中伪元素CSS属性

    jQuery:伪 动态更新伪元素CSS属性。 该插件是根据需要以无法通过单个类解决的灵活方式更新伪元素而创建的。 这样的用例可能是: 响应用户输入(鼠标,触摸等), 基于变量进行动画和 在内容以外的其他属性中...

    pseudoSelect.js:一个简单的JS jQuery 插件

    伪选择.js &lt;!-- your pseudoSelect theme --&gt; &lt; link rel =" stylesheet " type =" text/css " href =" /path/to/pseudoselect.css " &gt; &lt;!-- jQuery --&gt; &lt; script src =" ...

    CSS伪元素 CSS:before CSS伪元素(Pseudo Element):after与:before

    :before 伪元素在元素之前添加内容. 此样式会在每个 h2元素之前播放一段声音: 复制代码代码如下: h2:before { content:url(beep.mp3); } 如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)才支持...

    CSS 伪类(Pseudo-classes)

    CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} anchor伪类 在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示 实例 a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {...

    jquery-validation 支持 自定义错误样式

    jquery-validation 支持 自定义错误样式 ,包括如下 自定义错误样式 统一存放错误 定义 错误位置 定义 验证通过的样式 jquery validation- 错误样式概述 在 验证出现错误 后,jquery-validation会做如下操作 如果 ...

    CSS伪元素 :before, :after, box-shadow应用

    利用CSS伪元素 :before 和 :after 可以在文档前后插入内容而不改变文档原有结构,再配合 box-shadow 可以实现很炫的效果, 下面就展示三个例子: 1、利用 :before 和 :after 添加背景,比如给一段文字前后打引号...

    pseudo.js 解决ie8兼容

    好像是兼容IE8

    tailwindcss-pseudo-elements:TailwindCSS插件,添加伪元素的变体

    TailwindCSS插件,添加伪元素的变体( ::before , ::after , ::first-letter等)。 用法 安装 NPM npm install tailwindcss-pseudo-elements --save-dev 纱 yarn add tailwindcss-pseudo-elements -D 配置 const...

    pseudo:使用JavaScript设置伪元素样式

    Pseudo允许您使用JavaScript设置CSS伪元素(如:before和:after样式。 这对于动态定位元素(如工具提示或下拉元素上的点)非常有用。 通常将样式化这些元素归结为CSS方法。 例子: pseudo.style('.tooltip:after',...

    jQuery修改CSS伪元素属性的方法

    CSS伪元素(pseudo elements)不是DOM元素,因此你无法直接选择到它们。 假设有如下HTML代码: &lt;div class=techbrood id=td_pseudo&gt;techbrood introduction 和CSS代码: .techbrood:before { width: 0; } 现在你想...

    JS控制伪元素的方法汇总

    即我们不能通过$(“:before”)、$(dom).find(“:before”)或document.querySelector(“:before”)来获取:before伪元素。 为此,我不得不重新了解伪元素(Pseudo-elements)。为什么不能用JS直接获取伪元素呢? 譬如:...

    验证信息电信

    DHCPv6 客户端 DUID . . . . . . . : 00-01-00-01-17-BC-D0-1B-00-1E-68-A6-8D-40 DNS 服务器 . . . . . . . . . . . : 192.168.1.1 192.168.1.1 TCPIP 上的 NetBIOS . . . . . . . : 已启用 无线局域网适配器...

    pseudo-python:受限的python JavaScript C#Ruby编译器

    受限制的Python可以使用惯用JavaScript / Ruby / Go / C#转换器 是用于高级代码生成的框架:此编译器使用它来将Python的子集转换为所有Pseudo支持的语言 如果您使用的是Python3.5,并且已安装的伪Python版本遇到...

Global site tag (gtag.js) - Google Analytics