CSS 过渡（伪元素、字体大小、em、IE）不起作用答案

【问题标题】：CSS transition (pseudo element, font size, em, IE) not workingCSS 过渡（伪元素、字体大小、em、IE）不起作用
【发布时间】：2016-03-12 01:28:57
【问题描述】：

this transition 的基本理念是在我将鼠标悬停时增加字体真棒图标和文本的大小。

它在 Chrome、Opera、Safari 和 Firefox 中运行良好，但不适用于 IE 11。

该示例显示了使用 px（类 test1）和 em（类 test2）的相同转换；我使用 px 没有问题；该问题特定于以下场景：

效果：过渡

类型：伪元素

属性：字体大小

单位：em

浏览器：IE 11

.test1 span{
  font-size: 40px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.test1::before{
  font-family: FontAwesome;
  font-size: 20px;
  content: "\f08e";
  position: relative;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.test1:hover span{
  font-size: 80px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.test1:hover::before{
  font-size: 40px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.test2 span{
  font-size: 1em;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.test2::before{
  font-family: FontAwesome;
  font-size: 0.5em;
  content: "\f08e";
  position: relative;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.test2:hover span{
  font-size: 2em;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.test2:hover::before{
  font-size: 1em;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

<html>
  <head>
    <link rel="stylesheet" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
  </head>
  <body>
    <table>
      <tr style="font-size: 40px;">
        <td class="test1">
          <span>Text 01</span>
        </td>
      </tr>
      <tr style="font-size: 40px;">
        <td class="test2">
          <span>Text 01</span>
        </td>
      </tr>
    </table>
  </body>
</html>

我在这里遗漏了什么吗？ IE 中是否存在已知问题？

我能找到的最相似的问题是this one，它提到了 IE 中的一个已知问题，但它似乎是一个不同的问题。

【问题讨论】：

标签： css internet-explorer internet-explorer-11

【解决方案1】：

所以我只是stumbled across your question in my own search，我想我实际上有你的答案，虽然我找不到任何可以证明这一点的东西：在我自己的测试中，IE10 和 11 将在伪元素上堆叠 em。因此，您将 .test2::before 设置为 .5em 和 .test2:hover::before，在任何其他浏览器中（据我所知）意味着您正在覆盖相对于父级的“.5em”（即是，.test2)" 和“1em 相对于父级”，但在 IE 中它的意思是“1em 相对于.5em 相对于父级”，其中1em 相对于.5em 只是.5em（ 1 * .5 = .5)。

在我自己的情况下，我有.6em 基本状态，1.5em 悬停，并且可以通过将悬停状态更改为2.5em（即1.5em / .6）使其表现得与其他地方一样。当然这不是一个解决方案，因为在其他任何地方，2.5em 太大了。我最终使用了rems，它不会堆叠，并且适合我的目的（IE10+）。我不知道如何让ems 在不堆叠 IE10+ 伪元素的情况下工作。

【讨论】：