Question

奇怪的问题是在IE / 8/9中应用不透明度时边框消失，但在7中不是！我基本上有一个菜单，屏幕上方有标签。我：

<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);  
 }

对星星感到抱歉，我无法使代码块格式化正常工作基本上这只是当鼠标悬停在它们上面时应该解开按钮，但边框就消失了！这个问题只发生在IE8 / 9上，但在IE7，FF，Chrome，Safari上一切正常我已经在互联网上搜寻了一些奇怪的IE8 +边框/不透明度问题，但似乎没有任何问题。
有没有人遇到过类似的东西？

Answer 1

filter样式适用于IE7及更低版本。

IE8要求您使用-ms-filter（即使用供应商前缀）。而且IE8中的语法更复杂。它看起来像这样：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

IE9完全取消对filter的支持，并将其替换为标准CSS3 opacity，其效果与其他所有浏览器相同。

Quirksmode.org有完整的详细信息：http://www.quirksmode.org/css/opacity.html

Answer 2

这是我到目前为止所发现的，我不认为删除表格单元格background-color可能是您的解决方案。

<!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>

在 IE8 上应用背景色时，这是一个很好的结果：

enter image description here

非常奇怪的IE7 / 8边框/不透明度兼容性问题

2 个答案: