Question

TL; DR

Fiddle或minimal example page
<input type="button">，<button>和<a>具有相同的button类
他们都应该继承正文的字体大小（13px）
Firefox和Chrome将13.333333px显示为font-size <input>和<button>
Firefox和IE错误地渲染按钮
为什么？怎么解决？

完整版

我正在尝试设置一个CSS类，允许我使用一个类来设置<input type="button">，<button>和<a>元素的样式。

此外，我希望我的网站上的按钮继承字体大小或至少使用相对于继承的字体大小。这是为了确保不同的设备可以使用他们首选（和优化）的默认字体大小为我的网站上的按钮。

出于测试目的，我创建了一个minimal example page。它也可用on JSFiddle。我已将body font-size设置为13px，也用于测试。该页面使用Meyer Reset。

结果对我来说是一个谜。它不仅在Firefox（49）中看起来很烦人，在后者和Chrome（54）中按钮继承了错误的字体大小。我认为Chrome正确显示按钮更为巧合。 Internet Explorer 11使<a>按钮的宽度略小，但是三个测试对象中唯一的浏览器为所有三个按钮元素显示正确的font-size。其他浏览器会为13.333333px和<input>元素显示<button>，而<a>只显示正确的font-size。此外，Firefox的字体渲染与检查器中显示的.button值相矛盾。

我没有在其他浏览器中测试它，例如Safari，Opera或Edge。

我希望，我的电线越过了。我在这里摆弄了一下，无法弄清楚现在如何修复/解决它。请赐教。

编辑1：Firefox解决方法

借助以下答案，我能够制作Firefox解决方法。

要font-family: inherit;添加：

.button::-moz-focus-inner
{ margin: -1px; padding: 0; border-width: 1px; }

添加：

   With toolbar you can easily customize actionbar as shown below 

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/black"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <ImageView
            android:layout_width="40dip"
            android:layout_height="40dip"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="10dip"
            android:src="@drawable/logo" />

      <TextView android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Sample"
            android:layout_weight="1"
            android:id="@+id/title_textview"
            android:textColor="@android:color/white"
            android:gravity="center"/>

    </android.support.v7.widget.Toolbar>

仍然欢迎进一步的建议。

Answer 1

问题是某些浏览器决定向input元素提供不同的font-family。尝试向font-family类添加.button属性，以便浏览器不会根据html元素设置自己的属性。

字体大小也一样。我同意你对Meyer重置中font: inherit的看法，但不知何故（我不知道为什么，我们应该问一些浏览器行为专家），浏览器添加了它自己的内置css某些元素的自定义css。为了防止这种情况，您需要明确告诉浏览器如何呈现某些内容。你可能会问“哪些东西？我不能写一个班级的每一个css属性”，你说得对。

我建议您在浏览器控制台的帮助下，检查浏览器本身覆盖的属性，并在识别后将其写入您的CSS中。

使用Chrome控制台查看此图片以获取示例：

选择要分析的元素
转到“计算选项卡”。这将告诉您应用于该元素的真正css属性是什么
您可以通过在那里输入文字来过滤所有属性
请注意，13.3333px是来自user agent stylsheet（浏览器的默认行为）的值，它会覆盖您自己的css。
相应地编辑你的css。

按钮大小继承之谜

TL; DR

完整版

编辑1：Firefox解决方法

1 个答案: