关于伪对象:after的一点补充
之前我写过一篇文章-用伪对象:after清除浮动。对于firefox,这是个很好的办法。而今天,我偶然发现了一个问题,因为很多次用的时候都没发现,属于一个特殊现象。就是它把定义了:after这个属性的元素所包含的下面的所有元素都加了这个属性。
HTML代码是:
<p class="content_right_content"> </p>
<h2>Are you looking for:</h2>
<ul>
<li><img src="../images/arr2.jpg" /> <a href="/product/21/I-know/">I know</a></li>
<li><img src="../images/arr2.jpg" /> <a href="/product/20/I-m-boy/">I'm boy</a></li>
<li><img src="../images/arr2.jpg" /> <a href="/product/19/test2/">test2</a></li>
<li><img src="../images/arr2.jpg" /> <a href="/product/18/lanhai3test/">lanhai3test</a></li>
<li><img src="../images/arr2.jpg" /> <a href="/product/17/lanhai3/">lanhai3</a></li>
</ul>
<h2>Are you looking for:</h2>
<ul>
<li><img src="../images/arr2.jpg" /> <a href="/product/21/I-know/">I know</a></li>
<li><img src="../images/arr2.jpg" /> <a href="/product/20/I-m-boy/">I'm boy</a></li>
<li><img src="../images/arr2.jpg" /> <a href="/product/19/test2/">test2</a></li>
<li><img src="../images/arr2.jpg" /> <a href="/product/18/lanhai3test/">lanhai3test</a></li>
<li><img src="../images/arr2.jpg" /> <a href="/product/17/lanhai3/">lanhai3</a></li>
</ul>
CSS代码是:
.content_right_content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
这是一个很不爽的现象,所以使用的时候还得根据自己的实际情况来决定用哪个好。这个算做上次的一个补充,希望大家使用的时候稍微注意一下。
如果你觉得IE不好用(微软自己都承认IE的技术不如Firefox),你可以 ,来体验Firefox带给你的超爽感觉。



