I don't know how to explain to you the trouble by using faux columns. So I'll show it to us.
IN the first image you can see the faux columns rendered by Chrome. In the second by IE8. How you can see, on IE there is a different opacity, and i don't know why.
This is the HTML code :
<div class="commentsWide">
&开发者_开发问答lt;div class="commentContent">
<div class="commentsWide1">
<a class="lblackbbu" href="index.php?explore=userview&userv=chevr">chevr</a>
</div>
<div class="commentsWide2">
side A sorry i forgot to mention :P
</div>
<div class="commentsWide3">
<div class="commentsWide3A"> </div>
<div class="commentsWide3B">11:06:20</div>
<div class="commentsWide3C">30-06-2010</div>
</div>
</div>
</div>
And this the CSS :
.commentsWide{width:690px; float:left; background-color:#999999; color:#000000; border-bottom:1px #000000 solid; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px;}
.commentContent{width:690px; float:left; background-image:url(../img/comments_background.png);}
.commentsWide1{width:120px; float:left;}
.commentsWide2{width:450px; float:left; padding-left:10px; padding-right:10px;}
.commentsWide3{width:100px; float:left; text-align:right; font-weight:bold;}
.commentsWide3A{width:20px; height:35px; float:left; padding-left:10px; padding-top:5px;}
.commentsWide3B{width:70px; float:left; text-align:right; font-size:14px;}
.commentsWide3C{width:70px; float:left; text-align:right; font-size:12px;}
Why this happens? And how can I fix this trouble?
It could be that the .commentContent
style has a PNG background-image
which IE8 still doesn't get right.
精彩评论