Extremely weird IE7/8 border/opacity compatibility issue
The weird problem is borders disappearing when Opacity is applied in IE/8/9, but NOT in 7!
I've basically got a menu with tabs on top of the screen. I.e:<table>
<tr>
<td class="tab">button 1...<*/td>
<td class="tab">button 2....<*/td>
.
.
.
</tr>
</table>
<style>
td
{
opacity: 0.45;
filter:alpha(opacity=45);
.
.
.
}
td.tab:hover
{
opacity: 1;
filter:alpha(opacity=100);
}
Sorry about the stars, I couldn't get the code block formatting working right.
Basically this is just supposed to unfade the buttons when the mouse is hovered over them, but the border开发者_JAVA技巧s just disappear! This problem only occurs on IE8/9, but everything works fine on IE7,FF,Chrome,Safari. I've trawled the internet looking for some weird IE8+ border/opacity issues, but there don't seem to be any. Has anyone encountered something similar?The filter style is for IE7 and lower only.
IE8 requires you to use -ms-filter (ie with a vendor prefix) instead. Plus the syntax is more complex in IE8. It looks like this:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
IE9 drops support for filter entirely, and replaces it with standard CSS3 opacity, which works the same as it does in all other browsrs.
Quirksmode.org has the full details: http://www.quirksmode.org/css/opacity.html
This is what I discovered so far, I don't think removing background-color of your table cells could be a solution for you.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
table {border-top:1px solid #cccccc; border-left:1px solid #cccccc;}
table td {border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; padding:3px;}
table tr.opaque td {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100); opacity:1;}
/* By adding background-color below, the table borders cells disappears
in IE8. It's just the nth Microsoft's trigger tree!
IE7 does not have this issue. */
table tr.opaque td {background-color:#ffffff;}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr>
<tr class="opaque"><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr>
<tr><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr>
</table>
</body>
</html>
And this is the beautiful result when background-color is applied on IE8:
加载中,请稍侯......
精彩评论