IE11 CSS table 行的不透明度转换不起作用

Question

在上面的示例中，单击按钮添加和删除 selectedRow class div 和两个 table 行。由于对这些元素的公共 class 的转换声明，不透明度应该从 1.0 平滑地更改为 0.25。

这适用于 Chrome 43.0.2357.130（64 位），但不适用于 IE 11.0.9600 - 只有 DIV 元素发生变化。删除转换声明，不透明度会可靠地更改。

我是否遗漏了 CSS 的一些细微之处，或者这是一个错误？

Answer 1

我无法告诉您为什么它在 IE 中不能正常工作，但我一点也不感兴趣。我注意到那些在 IE 中不起作用的是带有 class .toggleTarget 的 TR，因此如果您在 div 中添加文本，它将正常工作。

<!DOCTYPE HTML>
<html>
   <head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  </head>

   <body>
     <div class="toggleTarget">DIV CONTENT</div>
     <table>
       <tr>
         <td>
           <div class="toggleTarget">TABLE ROW 0</div>
          </td>
       </tr>
       <tr><td>
         <div class="toggleTarget">TABLE ROW 1</div>
           </td></tr>
     </table>
     <button onclick="$('.toggleTarget').toggleClass('selectedRow');">Click Me</button>
   </body>
</html>

IE11 CSS table 行的不透明度转换不起作用

IE11 CSS opacity transition for table rows not working

html

css

internet-explorer-11