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

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(padding-left) 和 -webkit-padding-end (填充右)。目前我不认为这些有完整的填充或垂直填充。在使用它们编写 -webkit-padding-start 或您使用的任何规则时，请确保在您的 padding 规则之后。否则后者会覆盖前者，两者都将丢失。