CSS兼容性跨浏览器

Question

我是网页设计师，我有一个疑问。当我创建一个网站时，为了设计它我使用CSS，但问题是浏览器理解CSS n不同的方法。我的意思是，如果我在firefox中使用像mydiv { margin-left: 20px; }这样的css中的规则，我会看到距离左边5％的距离。但是如果我在Chrome中打开网站，我会看到距离左边的距离超过5％。我可以理解，因为没有相同的图形引擎可供使用。我的问题是：在Firefox中是否有任何方法可以在firefox和chrome中维护相同的disntace，width，height等（因为有最常用的浏览器）？我听说过一个-moz-document-url，它说所有适用的规则都只适用于Firefox。这是正确的 ？

Answer 1

您可以使用此重置：

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

注意

  

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

Answer 2

我建议您使用Normalize.css

Normalize.css使浏览器更加一致地呈现所有元素并符合现代标准。它只精确定位需要规范化的样式。