为什么没有样式的输入文本的边框宽度为2px？

Question

我有以下HTML标记,其结果是text类型的输入表单元素.

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

在一个体面的浏览器中,它呈现如下面的屏幕截图(右侧是缩放的图像):

那么,为什么在检查<input>元素时浏览器显示边框宽度为2px？我们可以在视觉上欣赏输入元素有1个像素.即使使用jQuery,当我做类似的东西jQuery('input').css('border-width')时吐出2px.

当然,这只是在没有样式的输入元素的情况下发生的.

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

谢谢!

Answer 1

每个浏览器都有一个内置样式表(称为"用户代理样式表"),其中包含某些元素的默认样式.

在这种情况下(Chrome 25 beta-m,Windows),风格是:

border: 2px inset;

结果inset在这个JSFiddle中非常明显,背景颜色形成鲜明对比.