按钮以不同的颜色显示

Question

我正在为我的网站使用 bootstrap v3。这就是我在整个网站上声明按钮的方式

<input type="button" class="btn ui-button" id="xx" value="xxxx" />

在 IE 11 和 Fire Fox 中，按钮的 RGB 值为 240,240,240，在 chrome 中为 221,221,221。我怎样才能使它们相似？

Answer 1

这不一定与引导程序有关，Chrome 只是显示与 Firefox、Internet Explorer 和 Microsoft Edge 略有不同的默认颜色。您可以通过在空白文档中运行以下命令来确认这一点，没有对外部样式表和/或引导程序的任何引用：

document.body.textContent = window.getComputedStyle(
    document.body.appendChild( document.createElement( "button" ) )
).backgroundColor;

您会注意到，对于 R、G 和 B，Chrome 会返回 221。Firefox、IE 和 Edge 都会返回 240。要解决此问题，您只需提供背景颜色。您可以通过使用引导类（例如btn-default）或通过您自己的样式来做到这一点：

button {
    background-color: rgb( 240, 240, 240 );
}

这样，之前的测试将在所有上述浏览器中产生240。