CSS - 随着页面缩小，字体大小增加

Question

我有一对按钮，由inline-block和float加入。它们可以正确缩放，直到在Google Chrome上缩小到67％左右。然后看起来字体变得比实际按钮大。

按钮的外观如何：

这是它后来的样子：

我相信由于字体大小的缩放，它也打破了按钮的布局。这是与按钮相关的CSS。

.btn { 
  font-weight: 700;
  font-size: 0.688em;
  text-transform: uppercase;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, .4);
  line-height: 22px;
  display: inline-block;
  color: #FFF;
}

.btn.btn-facebook {
  background: url('../img/buttons/facebook.png') repeat-x;
  height: 38px;
  margin: 0;
  float: left;
  border-radius: 5px 0 0 5px;
}

.btn.btn-twitter {
  background: url('../img/buttons/twitter.png') repeat-x;
  height: 38px;
  margin: 0;
  float: left;
  border-radius: 0 5px 5px 0;
}

.btn.btn-orange {
  background: url(../img/buttons/orange.png) repeat-x;
}

a.btn:hover,
a.btn:focus {
  color: #FFF;
}

.btn.btn-facebook i,
.btn.btn-twitter i {
  font-size: 18px;
  position: relative;
  top: 4px;
  margin-right: 5px;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, .4);
}

HTML：

<a href="#facebook" title="Sign Up With Facebook" class="btn btn-facebook">
   <i class="fa fa-facebook"></i> Sign up with Facebook
</a>
<a href="#twitter" title="Sign Up With Twitter" class="btn btn-twitter">
   <i class="fa fa-twitter"></i> Sign up with Twitter
</a>

因为我之前从未遇到过这个问题，所以有点混乱。我认为这可能与我使用PX有关吗？我尝试将我的值更改为EM，但似乎没有任何事情发生。

提前感谢您的帮助。

Answer 1

您可能需要使用javascript来完成所需内容。

Answer 2

删除line-height并使用padding代替按钮。