Firefox中的Html Css按钮看起来不同

Question

我的所有按钮都有一个css definiton，如下所示。但是我的按钮在mozilla firefox中看起来很奇怪。除了firfox mozilla之外，它们对所有浏览器都很好。我能找到原因。你可以查一下吗。

的FireFox：

铬

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进行渲染：

关于字体系列，您可以使用可下载的字体（Web字体）来获得更一致的结果。仅仅为几个按钮这样做可能会有点矫枉过正，但也许你也可以使用它。

Answer 2

您网站的字体系列是什么？这看起来像一个字体家庭问题。并非所有浏览器都以相同方式显示所有字体。如果你指定了多个，那么firefox可能找不到一个并且回退到另一个。

Answer 3

Chrome使用的默认字体与Firefox使用的字体不同。因此它看起来不同。

您可以在 Google字体上找到很多字体。

如果您还没找到，请尝试使用Google的 Material Design 中的 Roboto 字体。

Answer 4

我认为这是一个line-height问题。尝试添加以下内容： line-height: 1.5; 看看是否有帮助。