为什么我的 `` 元素不继承其父元素的字体样式？

不兼容字体继承

在 CSS 中，元素继承其父元素的字体属性，例如

元素。元素。然而，<输入>元素并不总是遵循此规则。

在提供的示例中，

和元素共享 Verdana 字体，但 元素显示为“MS Shell Dlg”。这是因为表单元素（包括 ）具有默认字体设置，该设置会覆盖继承的字体属性。

覆盖默认字体

以确保一致的字体继承对于所有元素，必须显式覆盖表单元素的默认字体设置。这可以通过添加以下 CSS 规则来实现：

<code class="css">input, select, textarea, button {
  font-family: inherit;
}</code>

通过添加此规则，所有表单元素将继承其父级的字体属性，包括

元素。

演示

解决方案的现场演示可在 http://jsfiddle.net/gaby/pEedc/1/ 上找到。在此演示中， 和和元素按预期显示 Verdana 字体。

注意：

虽然此解决方案适用于大多数现代浏览器，但 Internet Explorer 9 及更早版本不支持表单的字体继承元素。在这些浏览器中，默认字体设置仍将覆盖继承的字体属性。

以上是为什么我的 `` 元素不继承其父元素的字体样式？的详细内容。更多信息请关注PHP中文网其他相关文章！