Html 浏览器默认值

我正在开发一个带有表单的简单页面。 当我在页面中输入文本时，输入元素中出现的字符具有浏览器默认值，在chrome中，使用开发者工具，我可以看到字体默认为“webkit small control”。但是页面中出现的一个字段将只是一个包含如下数据的跨度字段

<td>
   <span id="readOnlyField">data</span>
</td>

数据

---

呈现页面时，span字段中的数据与输入文本字段中的数据不相等。我的问题是，如何知道浏览器应用于输入文本字段的字体和颜色？我无法使用“webkit small control”值，因为它在其他浏览器中不起作用。

通常，您无法知道这些值，因为默认值在不同浏览器中有所不同。此外，用户还可以设置默认字体系列、样式和超链接颜色

---

使用“CSS重置”样式表以自己的“基本”样式覆盖浏览器默认值是一种很好的做法。例如，在web上有许多CSS重置示例。虽然您的问题只是关于字体样式，但从长远来看，重置其他样式可以避免许多麻烦。

无法确定浏览器将选择什么默认字体大小。

您应该重新设置CSS（例如），并进一步设置页面样式，例如：

span.some-class {
  font-size: 12px;
  color: #333;
}

然后是您的HTML：

<span class="some-class" id="readOnlyField">data</span>

数据

这就是您应该首先重置所有样式的原因，或者使用一些已建立的css框架，例如，避免重新发明轮子

---

您可能应该覆盖css中需要的任何样式，以查看浏览器默认值

字体的所有主要浏览器的默认颜色为#000，但您可以将其设置为任何您想要的颜色。您可以设置为任何您想要的字体，只要它在系统上查看它。这些默认字体可以通过谷歌搜索找到。

在您的页面上，您无法找到浏览器默认使用的字体。也不能在CSS中指定浏览器使用默认情况下为

输入
元素使用的任何字体呈现
span
元素

但是，通过显式设置
字体系列
和
字体大小
，可以使
span
和
输入
元素中的文本看起来相同（当然还有通常的CSS警告）

input, span { font: 100% Arial, sans-serif; }

从理论上讲，您可能还需要设置其他属性（没有法律禁止浏览器在默认情况下以闪烁的紫色下划线显示
输入
元素内容），但这在实践中应该可以解决问题。请注意，需要设置字体大小，因为浏览器通常使用较小的字体大小（约90%）作为输入框。
我只在Mac上的Safari中注意到了这一点。为了使所有内容都按预期显示，您需要覆盖Safaris用户代理样式表：

font: -webkit-small-control;

可以在reset.css中使用此选项覆盖：

button, input, textarea, select, isindex, datagrid {
    font: inherit;
}

我似乎在reset.css中找不到这一点，但它帮了我的忙。
如果您愿意使用javascript，可以使用
getComputedStyle
查找此数据（签出）

对于旧的IE浏览器，您需要使用
currentStyle
属性（签出）

要将所有样式从一个元素复制到另一个元素，可以执行以下操作（我已将其简化为仅支持现代浏览器）：

你可能会发现你想要过滤它们，或者只需要几个你真正想要的。
这是WebKit的行为

看

有关解决方案，请参见：
是的，您和我的答案都是可靠的。这很奇怪。我不是反对者，但这里可能有人认为用户应该控制自己的字体大小，建议所有网页使用其所有者的偏好，而不是尊重用户的偏好，应该被反对。你可能是对的，但这并不能成为反对的理由。问题是如何做到这一点以及这是否可能，而不是它是否“正确”。此外，还可以定义自定义字体大小，并且仍然尊重用户的设置-使用类似于
body{font size:100%；}
的方法将body字体大小设置为用户首选的字体大小（这是默认的），然后您可以通过在CSS.True的其余部分中使用%作为单位来派生其他字体大小。此外，如果用户希望总是使用自己的字体，而不是网站的字体，浏览器有相应的设置。
var spanElement = document.querySelector('#mySpanElement');
var inputElement = document.querySelector('#myInputElement');
var styles = getComputedStyle(inputElement);
for (var name in styles) {
    spanElement.style[name] = styles[name];
}