CSS 兼容跨浏览器答案

【问题标题】：CSS Compatibily Cross-BrowserCSS 兼容跨浏览器
【发布时间】：2015-03-07 23:24:40
【问题描述】：

我是一名网页设计师，我有一个疑问。当我创建一个网站时，我使用 CSS 来设置它的样式，但问题是浏览器理解 CSS n 不同的方法。我的意思是，如果我在 Firefox 中像 mydiv { margin-left: 20px; } 这样在 css 中添加一条规则，我会看到它与左侧的距离为 5%。但是如果我在 Chrome 中打开该站点，我会看到它距左侧超过 5% 的距离。我可以理解，因为没有相同的图形引擎可以使用。我的问题是：CSS中是否有任何方法可以在firefox和chrome中保持相同的距离、宽度、高度等（因为有最常用的浏览器）？我听说过一个-moz-document-url，它说所有适用的规则都只适用于Firefox。这是正确的？

【问题讨论】：

标签： css google-chrome firefox cross-browser

【解决方案1】：

您可以使用此重置：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0
}

注意

mydiv { margin-left: 20px; } 在 css mybe 中不存在你的意思是#mydiv { 左边距：20px; } 或 .mydiv { margin-left: 20px; }

【讨论】：

【解决方案2】：

我建议你使用Normalize.css

Normalize.css 使浏览器能够更一致地呈现所有元素并符合现代标准。它仅针对需要规范化的样式。

【讨论】：