Чрезвычайно странная проблема совместимости границ IE7 / 8 и непрозрачности - PullRequest
Новая
       25

Чрезвычайно странная проблема совместимости границ IE7 / 8 и непрозрачности

7 голосов
/ 13 мая 2011

Странная проблема - исчезновение границ при применении Opacity в IE / 8/9, но НЕ в 7!
У меня в основном есть меню с вкладками в верхней части экрана. 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);  
 }

Извините за звёзды, я не могу заставить форматирование блока кода работать правильно. По сути, это просто означает, что кнопки исчезают, когда над ними наведена мышь, но границы просто исчезают! Эта проблема возникает только в IE8 / 9, но все отлично работает в IE7, FF, Chrome, Safari.
Я бродил по интернету в поисках каких-то странных проблем с границами / непрозрачностью IE8 +, но их, похоже, не было.
Кто-нибудь сталкивался с чем-то похожим?

Ответы [ 2 ]

3 голосов
/ 25 мая 2011

Стиль 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

0 голосов
/ 25 мая 2011

Это то, что я обнаружил до сих пор, я не думаю, что удаление 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

...