Home > Article > Web Front-end > 如何解决IE6，7，8不支持before:after伪元素_html/css_WEB-ITnose
如何解决IE6，7，8不支持before:after伪元素_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:211387browse
我有个效果在火狐中是正常的，但在IE下不行。代码如下：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style class="csscreations">/*Now the CSS*/* {margin: 0; padding: 0;}.tree ul { padding-top: 20px; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s;}.tree li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s;}/*We will use :before and :after to draw the connectors*/.tree li:before, .tree li:after{ content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #ccc; width: 50%; height: 20px;}.tree li:after{ right: auto; left: 50%; border-left: 1px solid #ccc;}/*We need to remove left-right connectors from elements without any siblings*/.tree li:only-child:after, .tree li:only-child:before { display: none;}/*Remove space from the top of single children*/.tree li:only-child{ padding-top: 0;}/*Remove left connector from first child and right connector from last child*/.tree li:first-child:before, .tree li:last-child:after{ border: 0 none;}/*Adding back the vertical connector to the last nodes*/.tree li:last-child:before{ border-right: 1px solid #ccc; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0;}.tree li:first-child:after{ border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0;}/*Time to add downward connectors from parents*/.tree ul ul:before{ content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #ccc; width: 0; height: 20px;}.tree li a{ border: 1px solid #ccc; padding: 5px 10px; text-decoration: none; color: #666; font-family: arial, verdana, tahoma; font-size: 11px; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s;}/*Time for some hover effects*//*We will apply the hover effect the the lineage of the element also*/.tree li a:hover, .tree li a:hover+ul li a { background: #c8e4f8; color: #000; border: 1px solid #94a0b4;}/*Connector styles on hover*/.tree li a:hover+ul li:after, .tree li a:hover+ul li:before, .tree li a:hover+ul:before, .tree li a:hover+ul ul:before{ border-color: #94a0b4;}/*Thats all. I hope you enjoyed it.Thanks :)*/</style><body><div class="tree"> <ul> <li> <a href="#">Parent</a> <ul> <li> <a href="#">Child</a> <ul> <li> <a href="#">Grand Child</a> </li> </ul> </li> <li> <a href="#">Child</a> <ul> <li><a href="#">Grand Child</a></li> <li> <a href="#">Grand Child</a> <ul> <li> <a href="#">Great Grand Child</a> </li> <li> <a href="#">Great Grand Child</a> </li> <li> <a href="#">Great Grand Child</a> </li> </ul> </li> <li><a href="#">Grand Child</a></li> </ul> </li> </ul> </li> </ul></div></body></html> 回复讨论(解决方案)
浏览器不支持，只能采用脚本实现了
比如
http://api.jquery.com/after/
http://api.jquery.com/before/
另外参考
http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7
IE6 7 8 不支持last-child！求解
这个样式，在css3里面经常配合使用，
ie下本来就不兼容。
没什么好的解决办法。
如果想兼容ie,最好别用这个，换一种方法。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：造成网页乱码的因素有哪些？_html/css_WEB-ITnoseNext article：求教CSS文字居中问题_html/css_WEB-ITnose