基于 em 单位的有问题的 CSS 过渡

Question

我正在尝试创建一种效果，其中位于标题中的锚元素在悬停时自行放大，同时保持元素的宽度和高度，使其适合标题并且不会移动或影响任何其他元素方式。 动画在 Chrome 中运行良好，但在 Mozilla、Firefox 和 Edge/IE 中，过渡效果完全不理想。

• 标题的高度为 4em。
• 要设置动画的锚元素的默认字体大小是 2em。宽度和高度也是 2em (2*2 = 4em 所以我得到了完美 适合标题的方块）。
• 悬停时，我将字体大小更改为 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 属性。代码少，效果一样，一般是well supported。

DEMO

对于您的特定问题，在我看来 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>