Question

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

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

当我渲染页面时，span字段内的数据不等于输入文本字段内的数据。我的问题是，我怎么知道浏览器应用于输入文本字段的字体和颜色？我不能使用值“webkit-small-control”，因为它不适用于其他浏览器。

Answer 1

我在Mac上的Safari中只注意到了这一点。为了使所有内容都按预期显示内容，您需要覆盖Safaris用户代理样式表：

font: -webkit-small-control;

可以在reset.css中使用它覆盖

：

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

我似乎无法在任何reset.css中找到它，但它为我完成了这个技巧。

Answer 2

通常，您无法知道这些值，因为默认值因浏览器而异。此外，用户可以设置默认字体系列，样式和超链接颜色等内容。

最好使用“CSS重置”样式表来覆盖使用您自己的“基本”样式的浏览器默认值。网络上有很多CSS重置示例，例如the HTML5 Doctor's one或Eric Meyer's one。虽然您的问题仅与字体样式有关，但从长远来看，重置其他样式也可以避免许多麻烦。

Answer 3

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

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

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

然后你的HTML：

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

Answer 4

这就是你应该首先重置所有样式或使用一些已建立的css框架（如blueprint）并避免重新发明轮子的原因。

你可能应该将你想要的任何样式覆盖到你的浏览器默认值

Answer 5

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

Answer 6

没有已知的方法可以在您的页面上找到浏览器默认使用的字体。您也不能在CSS中指定浏览器使用默认情况下为span元素使用的任何字体来呈现input元素。

但是，您可以通过明确设置span和input，使font-family和font-size元素中的文字看起来相同（通常使用常见的CSS注意事项），例如

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

理论上，您可能还需要设置其他属性（默认情况下，没有针对显示input元素内容的浏览器的法律以闪烁的紫色下划线标记），但这应该在实践中处理。请注意，需要设置字体大小，因为浏览器通常会使用缩小的字体大小（约90％）作为输入框。

Answer 7

如果您愿意使用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];
}

你可能会发现你想要过滤它们，或者只选择你真正想要的几个。

Answer 8

这是WebKit的一种行为。

请参阅https://bugs.webkit.org/show_bug.cgi?id=50092

有关解决方案，请参阅：http://sijobling.com/tips/css-fix-for-html5-search-in-webkit/

浏览器默认值

8 个答案: