Question

我的网站上有一些按钮，与Firefox相比，Chrome浏览器看起来过于瘦了。
按钮的HTML看起来像：
<button name="shutdown" type="submit" value="df" class="boton"> Press </button>

我的CSS尝试看起来像：

.boton {
    font-size: 17px;
    color: #000;
    background: #ee3333;
    background: rgba(225, 50, 50, 0.6) !important;
    font-family: lucida console;
    border: 1px solid #FF4444;
    padding: 2px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    cursor:pointer;
}
.chrome .boton
{
    padding: 5px !important;
}

我不确定我是否正确行事。 “.boton”确实改变了按钮的样式，但Chrome中的填充不会改变。这有什么不对？

Answer 1

填充不应用于元素的原因是由于没有为任何元素分配chrome类。某些特定于供应商的样式存在各种黑客攻击，请参阅this article，但没有浏览器应用.chrome或.moz类或类似的内容。

但是，要实现更多“水平”填充，可以使用-webkit-padding-start（左侧填充）和-webkit-padding-end（填充右侧）。目前我不相信这些还有完整的填充或垂直填充。在使用-webkit-padding-start规则后，请务必使用这些内容来编写padding或您使用的任何规则。否则后者将覆盖前者，两者都会丢失。

Answer 2

除非你还添加了一些浏览器嗅探，否则会将类.chrome等添加到正文中，该类无效。

另一方面，Firefox和Chrome的盒子模型没有根本不同，但填充，边框，边距等的默认值可能不同。只需显式设置这些值，它们最有可能呈现相同的值（由于不同的舍入误差，给出或取几个像素）。您不需要为每个浏览器添加自定义css（但如果您使用实验性css功能，如-moz-border-radius和-webkit-border-radius与供应商前缀，您应该同时使用所有这些;其他人将忽略未知的属性）。

不同版本的IE（Internet Explorer）确实有一个完全不同的盒子模型，如果你不能使用标准css正确渲染某些版本的IE，你应该使用{{3在主css文件之后包含IE特定的css覆盖。

根据浏览器加载css文件的各个部分

2 个答案: