CSS 过渡(伪元素、字体大小、em、IE)不起作用

这种过渡的基本思想是在我鼠标悬停时增加字体真棒图标和文本的大小。

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

该示例显示了使用 px（类测试1）和em（类测试2）的相同转换;我使用 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 中是否存在已知问题？

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

所以我只是在自己的搜索中偶然发现了你的问题，我想我实际上有你的答案，尽管我找不到任何证明它的东西：在我自己的测试中，IE10 和 11 会将 em 堆叠在伪元素上。所以你.test2::before设置为 .5em 和 .test2:hover::before ，这在任何其他浏览器中（据我所知）意味着你正在用"相对于父级1em"覆盖"相对于父级（即.test2 .5em"，但在 IE 中它意味着"相对于.5em相对于父级的1em"，其中相对于.5em 1em只是 .5em （1 * .5 = .5）。

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

相关内容

最新更新

热门标签：