css - Padding Css问题-浏览器兼容性问题

Question

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

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

但结果是 padding: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。