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

【问题标题】：Why unstyled input text has a border width of 2px?为什么无样式输入文本的边框宽度为 2px？
【发布时间】：2012-12-31 12:34:07
【问题描述】：

我有以下 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/

谢谢！

【问题讨论】：

【解决方案1】：

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

在本例中（Chrome 25 beta-m，Windows），样式为：

border: 2px inset;

inset 的结果在这个JSFiddle 中确实可见，具有对比色背景。

【讨论】：