Question

this transition的基本思想是鼠标悬停时增加字体真棒图标和文字的大小。

它适用于Chrome，Opera，Safari和Firefox，但它不能与IE 11一起使用。

该示例显示了使用px（class test1）和em（class test2）的相同转换;我使用px没有问题;该问题特定于以下情形：

效果：过渡

输入：伪元素

属性： font-size

单位： 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中提到了一个已知问题，但它似乎是一个不同的问题。

Answer 1

所以我只是stumbled across your question in my own search而且我认为我确实有你的答案，虽然我找不到任何证明它的东西：在我自己的测试中，IE10和11将堆叠关于假元素的ems。因此，您已If fileOpener.ShowDialog() = Windows.Forms.DialogResult.OK Then pbStudentImage.Image = Image.FromFile(fileOpener.FileName) txtStudentImage.Text = fileOpener.FileName End If设置为和html, body { height: 100%; } body { display: flex; flex-direction: column; justify-content: space-between; } header { padding: 20px; background: dodgerblue; } main { padding: 10px; } footer { padding: 10px; background: firebrick; }，在任何其他浏览器（据我所知）将意味着您覆盖＆＃34; <header> <h1>This is the header</h1> </header> <main class="container"> <h1>This is the main content area</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsum commodi harum labore nesciunt, et modi iusto vitae nam eum deleniti, officia praesentium corporis quasi </p> </main> <footer> <h1>Footer</h1> </footer>相对于父母（即.test2::before）＆＃34;与＆＃34; .5em相对于父母＆＃34;但是在IE中，相对于父母＆＃34;，相对于.test2:hover::before而言，相对于.5em，.test2相对于1em，1em只是.5em（1） * .5 = .5）。

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

CSS转换（伪元素，字体大小，em，IE）不起作用

1 个答案: