Chrome默认输入文字边框

Question

我正在尝试了解Chrome应用于元素的默认边框.对于这个例子,我正在使用输入文本.

使用jquery获取边框时我有

$("input").css("border")
"2px inset rgb(0, 0, 0)"

在chrome dev标签中.我可以看到它是正确的,因为它与chrome的计算样式选项卡中显示的相同.

当我尝试手动应用于"2px inset rgb(0, 0, 0)"元素的边框时(通过jquery css或直接通过样式表),我得到了一个非常不同的边框.我注意到rgb(0,0,0)是黑色的但是chrome中的默认边框确实是灰色的......

我很困惑..我有一个小提琴,显示这个http://jsfiddle.net/MicheleC/jE5K7/

编辑:

这是chrome用户代理样式表

border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;

导致

问题1: 为什么默认为rgb(238,238,238)？

问题2: 如何以编程方式获得真实的计算颜色？即$("input").css("border-bottom-color")不幸的是给了我rgb(0,0,0)

问题3: 当我手动设置时border: 2px inset rgb(238, 238, 238);(这就是chrome说的计算)为什么我会得到不同的东西？

Answer 1

input由于历史原因,浏览器在渲染元素方面有不同的奇怪之处.早期的实现使用了内置的例程,因此渲染或多或少地免于你在CSS中试图说的任何东西.常见的默认值源于这些实现,并且为了兼容性,使旧页面显示他们习惯的方式,当CSS不用于设置关键属性(如border)时,现代实现"回退"到旧的呈现.

这意味着概念上在普通的基于CSS的层上面有一个渲染层,如果在CSS中没有设置"足够的"渲染规则,则该元素将以旧方式呈现.

例如,如果您正好<input>并且使用getComputedStyle(比jQuery方式更直接的方式)检查其CSS属性,但是给出相同的结果,您将获得计算的CSS属性.基本上,这就是border: inset 2px将边框颜色默认为内容颜色(通常但是它们只反映了在CSS完全控制下渲染元素时使用的值.这里它们不是,并且使用内部浏览器默认渲染.在Chrome中,这意味着边框是实心灰色1px和有一个1px的填充.

如果border-color仅设置eg ,则会禁用初始浏览器默认渲染,而是使用CSS控制的渲染.这意味着您获得了指定颜色的嵌入2px边框,而不是仅使用更改的颜色获取浏览器默认渲染.

这很令人困惑,但在实际方面,它很简单:如果您想要input元素边框的浏览器默认渲染,请不要在其上设置任何边框属性.如果您不想这样,请将所有浏览器属性设置为所需的值.

关于具体问题:

1. rgb(238, 238, 238)Chrome开发工具中的颜色信息可能是由渲染方法之间的某些干扰引起的错误.请注意,它非常浅灰色,与实际使用的颜色不符.它可能是在插入边框中用作较浅颜色的颜色.
2. 您可以按照使用或使用的方式获得计算颜色getComputedStyle,但它仅与CSS控制的渲染相关,并且不适用于<input>没有浏览器样式表之外的任何样式表设置.
3. 设置所有边框属性时,将获得CSS控制的渲染.