按钮以不同的颜色显示

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

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

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

正如您将注意到的，Chrome会为R，G和B返回221 .Firefox，IE和Edge都返回240。要解决此问题，您只需提供背景颜色。您可以使用引导类（例如btn-default）或通过自己的样式来执行此操作：

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

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