Extremely weird IE7/8 border/opacity compatibility

2019-04-26 14:03发布

站内问答 / HTML/CSS
403 2 6

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 borders 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?

2条回答
唯我独甜
2楼-- · 2019-04-26 14:11

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

查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
3楼-- · 2019-04-26 14:33

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:

enter image description here

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)