填充Css问题 - 浏览器兼容性问题

Question

我正在尝试为浏览器兼容性问题提供差异填充

-webkit-padding-start: 4px 0px; //for google chrome
-moz-padding-start: 3px 0px;    //for Mozilla Firefox
padding: 3px 0;                 // others browser

但结果是填充：3px 0;拿两个浏览器。我需要区分它。

Answer 1

如果可能，您应该尝试为所有浏览器使用相同的样式。即使最初有一点工作，它也更容易维护。那就是说，

padding-start样式采用单个值，而不是两个值。

示例，-moz-padding-start的语法：

-moz-padding-start: <length> | <percentage> | inherit | auto;

示例：

-moz-padding-start: 10px;

参考：https://developer.mozilla.org/en-US/docs/CSS/-moz-padding-start

Answer 2

如果按此顺序执行，浏览器将使用最后一个声明：padding将覆盖-webkit-padding-start。 所以切换声明。

padding: 3px 0;                 // other browsers
-webkit-padding-start: 4px;     // for Google Chrome
-moz-padding-start: 3px;        // for Mozilla Firefox

然后-webkit-padding-start将覆盖padding的起始值。