我正在开发一个带有表单的简单页面。 当我在页面中放置输入文本时，输入元素内出现的字符具有浏览器默认值，在使用开发人员工具的 chrome 中，我可以看到字体默认为“webkit-small-control”。但是将出现在页面中的字段之一将只是一个跨度字段，其中包含这样的数据
<td>
<span id="readOnlyField">data</span>
</td>
当我呈现页面时，跨度字段内的数据不等于输入文本字段内的数据。我的问题是，我如何知道浏览器应用于输入文本字段的字体和颜色？我不能使用值“webkit-small-control”，因为它不能在其他浏览器中工作。
【问题讨论】：
标签： html css browser fonts cross-browser
我只在 Mac 上的 Safari 中注意到了这一点。为了使所有内容都按预期显示内容，您需要覆盖 Safaris 用户代理样式表：
font: -webkit-small-control;
可以在你的 reset.css 中使用它来覆盖：
button, input, textarea, select, isindex, datagrid {
font: inherit;
}
我似乎在任何 reset.css 中都找不到这个，但它为我解决了问题。
【讨论】：
通常，您无法知道这些值，因为默认值因浏览器而异。此外，用户还可以设置默认字体系列和样式以及超链接颜色等内容。
使用“CSS 重置”样式表以您自己的“基本”样式覆盖浏览器默认设置是一种很好的做法。网上有很多 CSS 重置示例，例如 the HTML5 Doctor's one 或 Eric Meyer's one。虽然您的问题只是关于字体样式，但从长远来看，重置其他样式也可以避免很多麻烦。
【讨论】：
无法确定浏览器会选择什么默认字体大小。
您应该重置 CSS（例如使用 Normalize）并进一步设置页面样式，例如：
span.some-class {
font-size: 12px;
color: #333;
}
然后是你的 HTML：
<span class="some-class" id="readOnlyField">data</span>
【讨论】：
这就是你应该首先重置所有样式或使用一些已建立的 css 框架（如blueprint）并避免重新发明轮子的原因。
您可能应该将您想要在 css 中使用的任何样式覆盖为 aovid 浏览器默认值
【讨论】：
body { font-size: 100%; } 的东西将正文字体大小设置为用户的首选字体大小（无论如何这是默认字体大小），然后您可以通过在 CSS 的其余部分中使用 % 作为单位导出其他字体大小。
所有主流浏览器的默认字体颜色都是#000，但您可以将其设置为任何您想要的颜色。只要在系统上查看字体，您就可以将其设置为任何您想要的字体。这些默认值可以通过谷歌搜索找到。
【讨论】：
您无法在页面上找到浏览器默认使用的字体。您也不能在 CSS 中指定浏览器使用默认为 input 元素使用的任何字体呈现 span 元素。
但是您可以通过显式设置 font-family 和 font-size 来使 span 和 input 元素中的文本看起来相同（当然，使用通常的 CSS 警告），例如
input, span { font: 100% Arial, sans-serif; }
理论上，您可能还需要设置其他属性（没有法律禁止浏览器默认以闪烁的紫色下划线显示input 元素内容），但这应该在实践中处理好事情。请注意，需要设置字体大小，因为浏览器通常会为输入框使用缩小的字体大小（约 90%）。
【讨论】：
如果您愿意使用 javascript，可以使用getComputedStyle 查找此数据（查看Mozilla Developer Network）。
对于旧的 IE 浏览器，您需要使用 currentStyle 属性（查看 Quirksmode）。
要将所有样式从一个元素复制到另一个元素，您可以执行以下操作（我已对此进行了简化以仅支持现代浏览器）：
var spanElement = document.querySelector('#mySpanElement');
var inputElement = document.querySelector('#myInputElement');
var styles = getComputedStyle(inputElement);
for (var name in styles) {
spanElement.style[name] = styles[name];
}
你可能会发现你想要过滤它们，或者只选择你真正想要的几个。
【讨论】：
这是 WebKit 的一种行为。
见https://bugs.webkit.org/show_bug.cgi?id=50092
如需解决方案，请参阅：http://sijobling.com/tips/css-fix-for-html5-search-in-webkit/
【讨论】：