Question

我正在尝试创建一种效果，其中位于标题中的锚元素在悬停时自我缩放，同时保持元素的宽度和高度，使其适合标题，不会移动或影响任何元素办法。动画在Chrome中运行良好，但在Mozilla，Firefox和Edge / IE中，过渡效果根本不同。

标题的高度为4em。
要设置动画的锚元素的默认字体大小为 2em的。宽度和高度也是2em（2 * 2 = 4em，所以我得到完美符合标题的正方形。）
当我悬停时，我将font-size更改为2.5em，宽度和高度都改为1.6em（2.5 * 1.6 =标题高度的4em）＆lt; - 我认为这是一个问题。

我尝试了仅设置高度，字体大小和行高的动画，但这并没有消除问题。似乎浏览器被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上被解雇了;我无法弄清楚原因。

＆＃13;

* {
  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);
  
}

＆＃13;

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

＆＃13;

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>

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

2 个答案: