基于em单元的有问题的CSS转换

Question

我正试图创建一种效果，即位于页眉中的锚元素在悬停时会自动放大，同时保持元素的宽度和高度，使其适合页眉，不会以任何方式移动或影响其他元素。Chrome中的动画效果很好，但在Mozilla、Firefox和Edge/IE中，转换效果根本不好。

• 收割台高度为4米
• 要设置动画的锚点元素的默认字体大小为2em。宽度和高度也是2米（2*2=4米，所以我得到了完美的适合页眉的正方形）
• 悬停时，我将字体大小更改为2.5em，并将宽度和高度都更改为1.6em（标题高度的2.5*1.6=4em）<-我认为这是个问题

我试着只设置高度、字体大小和行高的动画，但这并不能消除问题。浏览器似乎被em单位定义的宽度和高度弄糊涂了，所以他们先缩小内容，然后再放大。尽管如此，这种行为并没有出现在Chrome中，因为它一切都很好。

这个问题有什么解决方案吗？因为我想避免使用px单位，因为网站的响应性更容易实现。或者，也许我应该改用px单位，并使用更多的媒体查询网站？

问题代码：

<!-- Header -->
        <div id="header">
            <nav class="nav-buttons">
                <a href="#">L1</a>
                <a href="#">L2</a>
                <a href="#">L3</a>
            </nav>
        </div>

CSS：

#header {
  position: fixed;
  height: 4em;
  width: 100%;
}
/* global element settings */
a,
a:link,
a:visited,
a:hover,
a:active{
    text-decoration: none;
}
/* navigation buttons */
.nav-buttons > *,
.nav-buttons > *:visited {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  line-height: 2em;
  margin: 0;
  padding: 0;
  width: 2em;
  height: 2em;
  /*text-shadow: 0 0 0.1em #555555;*/
  transition-property: height, line-height, font-size, text-align, vertical-align;
  transition-duration: 0.3s;
}
.nav-buttons > *:hover,
.nav-buttons > *:active,
.button-active {
  transition-property: height, line-height, font-size, text-align, vertical-align;
  transition-duration: 0.3s;
  font-size: 2.5em;
  line-height: 1.6em;
  width: 1.6em;
  height: 1.6em;
}

随附JSFiddle：https://jsfiddle.net/2futafsw/3/

Answer 1

我建议实现相同的目标，但使用不同的方法。我会使用transform属性。它的代码更少，可以达到同样的效果，并且通常得到很好的支持。

演示

对于您的特定问题，在我看来，由于某种原因，font-size转换在moz上延迟启动；我不知道为什么。

* {
  box-sizing: border-box;
}
body {
  font-size: 16px;
}
header {
  position: fixed;
  height: 4em;
  width: 100%;
}
a {
    color: inherit;
    text-decoration: none;
}
nav a {
    display: inline-block;
  text-align: center;
  line-height: 2em;
    font-size: 2em;
    height: 2em;
    width: 2em;
  transition: all 300ms;
}
nav a:hover {
  transform: scale(1.5);
  
}

<header>
  <nav>
    <a href="#">L1</a>
    <a href="#">L2</a>
    <a href="#">L3</a>
  </nav>
</header>

Answer 2

不幸的是，浏览器似乎只是以不同的方式处理转换。您需要做的是将浏览器前缀附加到transition-property规则中，并相应地应用样式。

对于FireFox，这是-moz-transition-property，Chrome/Safari是-webkit-transition-property。

我已经稍微简化了你的转换。Chrome只需要字体大小就可以正常工作，而FireFox需要在页边空白处添加动画（有趣的是，这会把Chrome的动画搞砸）。

#header {
  position: fixed;
  height: 4em;
  width: 100%;
}
/* global element settings */
a,
a:link,
a:visited,
a:hover,
a:active{
	text-decoration: none;
}
.nav-buttons > a,
.nav-buttons > a:visited {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  line-height: 2em;
  margin: 0;
  padding: 0;
  width: 2em;
  height: 2em;
  -moz-transition-property: font-size, margin;
  -webkit-transition-property: font-size;
  transition-duration: 0.3s;
}
.nav-buttons > a:hover,
.nav-buttons > a:active,
.button-active {
  transition-duration: 0.3s;
  font-size: 2.5em;
  margin: -.20em;
}

<!-- Header -->
<div id="header" class="">
  <nav class="nav-buttons">
    <a href="#" class="glyphicon glyphicon-menu-hamburger">a</a>
    <a href="#">L1</a>
    <a href="#">L2</a>
    <a href="#">L3</a>
  </nav>
</div>