javascript - 输入文本的 Chrome 默认边框

Question

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

使用jquery获取边框时我有

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

在 chrome 开发选项卡中。我可以看到它是正确的，因为它与 chrome 的计算样式选项卡中显示的相同。

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

我很困惑.. 我有一个显示这个 http://jsfiddle.net/MicheleC/jE5K7/ 的 fiddle

编辑:

这是 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 未用于设置关键属性(如边框)​​时，现代实现“回退”到旧渲染。

这意味着从概念上讲，在普通的基于 CSS 的层之上有一个渲染层，如果没有在 CSS 中设置“足够”的渲染规则，元素将以旧方式渲染。

例如，如果您只有 <input>然后使用 getComputedStyle 检查它的 CSS 属性(一种比 jQuery 方式更直接的方式，但给出相同的结果，你得到计算的 CSS 属性。基本上，这是 border: inset 2px ，默认边框颜色为内容颜色(默认情况下通常为黑色)。但它们只反射(reflect)值当元素在 CSS 的完全控制下呈现时使用。这里没有，使用内部浏览器默认呈现。在 Chrome 中，这意味着边框为纯灰色 1px，并有 1px 的填充。

如果您设置例如border-color只是，最初的浏览器默认渲染被抑制，取而代之的是使用 CSS 控制的渲染。这意味着您将获得指定颜色的 2px 内嵌边框，而不是仅更改颜色的浏览器默认呈现。

这令人困惑，但在实践方面，它相当简单:如果您希望浏览器默认呈现 input 的边框。元素，不要在其上设置任何边框属性。如果您不想这样，请将所有 浏览器属性设置为您想要的值。

关于具体问题:

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