css - 为什么无样式输入文本的边框宽度为 2px？

Question

我有以下 HTML 标记，导致文本类型的输入表单元素。

<!DOCTYPE html>
<html>
    <body>
        <input type="text" />
    </body>
</html>

在一个像样的浏览器中，它呈现如下屏幕截图（在右侧的缩放图像）：

那么，为什么在检查<input>元素时浏览器显示的边框宽度为2px？我们可以直观地看出输入元素有1 个像素。即使使用 jQuery，当我做类似的事情时jQuery('input').css('border-width')它也会吐出2px。

当然，这只发生在无样式的表单输入元素中。

我还创建了一个 JsFiddle 演示：http: //jsfiddle.net/HBDUZ/

谢谢！

score 5 · Accepted Answer

每个浏览器都有一个内置样式表（称为“用户代理样式表”），其中包含某些元素的默认样式。

在这种情况下（Chrome 25 beta-m，Windows），样式为：

border: 2px inset;

的结果在此JSFiddleinset中确实可见，具有对比鲜明的背景颜色。

1 回答 1