css - Html CSS 按钮在 Firefox 中看起来不同

Question

我的所有按钮都有一个 CSS 定义，如下所示。然而我的按钮在 Mozilla Firefox 中看起来很奇怪。除了 firfox mozilla 之外，它们在所有浏览器上看起来都很好。我能找到原因。你能检查一下吗？

火狐:

Chrome

HTML 按钮

<button class="btn btnFB btnBig"  >Signin By Facebook </button>

CSS定义

.btn {
    display: inline-block;
    margin: 0;
    cursor: pointer;
    border: 1px solid #bbb;
    overflow: visible;
    padding: 7px 2px 7px 20px;
    font-size: 0.97em;
    font-weight: bold;
    vertical-align: middle;
    text-decoration: none;
    white-space: nowrap;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    transition: all .15s linear;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0.35);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255,0.3)), to(rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0));
    background-image: linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0));
}

button.btnFB{background-color: #3b5998;border-color: #3b5998;color: #FEF3E5;}
button.btnFB:hover{background-color: #4966A5;}
button.btnFB:active{background-color: #3b5998;}
button.btnBig{line-height: 1.33em;padding: 8px 12px 8px 30px;}

编辑:我网站的字体系列

body{
    font: normal 12px RobotoDraft,Roboto,'Helvetica Neue',arial,sans-serif;
    background-color: #F7F7F7;
    color: #262626;
}

Answer 1

当您未在页面上设置字体时，每个浏览器都会使用其默认字体。这很可能意味着 button 元素中使用的字体系列有所不同。它通常是 Arial，但 Firefox 有不同的设置，例如我的系统中的 MS Shell Dlg (Win 7)。您可以使用每个浏览器的开发者工具检查此类问题。

字体大小也有差异。当您将字体大小设置为 0.97em 时，浏览器会将父元素的字体大小乘以 0.97，然后可能会以不同的方式对结果进行四舍五入。当基本字体大小为典型默认值 16px 时，IE 使用 15.52px，Firefox 使用正确的精确值 15.53px，Chrome 使用 16px(即四舍五入为整数像素)。这与字体系列变化相结合，会导致细微的差异。

您可以通过将 font-size: 0.97em 替换为

来使渲染更加均匀

font-size: 1em;

并添加

font-family: Arial;

在带有 .btn 选择器的规则中。

这并不能消除所有差异，因为浏览器呈现字体的方式略有不同，而且并非所有系统都有 Arial(许多现代手持设备没有)。在 Win 7 上的 Firefox 和 Chrome 中渲染:

关于字体系列，您可以使用可下载的字体(网络字体)，以获得更一致的结果。仅针对几个按钮这样做可能有点过分，但也许您还有其他用途。