Question

我已整合了与顶部（线条）排列的图像和其他图像，与Chrome或Safari相比，Firefox的差异为6px。我不明白差异来自哪里，因为我的所有其他图像（线条）在所有浏览器中排列完美。 my website: beta.zenniel.ca

这是我的css：

.BlogueTop  {
  float: right;
  background: url(http://beta.zenniel.ca/wp-content/uploads/2014/07/blogueTop.jpg) no-repeat;
  width: 12px;
  height: 268px;
  margin: -269px 79px 0px 0px;
  padding: 0;
  border: 0;
}

顺便说一句，顶部的图片在Firefox和Chrome中是相同的位置（右起140px）。

感谢您的帮助！

Answer 1

在.css文件顶部添加

*{
margin: 0;
padding: 0;
}

Answer 2

每个浏览器都有自己的默认值。因此，有css文件将浏览器的所有默认值设置为您自己的默认值。您可以在网上找到这样的css文件。

以下是一个示例：http://meyerweb.com/eric/tools/css/reset/

Answer 3

为什么不将保证金更改为

.BlogueTop  {
    background: url("http://beta.zenniel.ca/wp-content/uploads/2014/07/blogueTop.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    float: right;
    height: 268px;
    margin: -269px 84px 0 0;
    padding: 0;
    width: 12px;
}

而不是

.BlogueTop  {
  float: right;
  background: url(http://beta.zenniel.ca/wp-content/uploads/2014/07/blogueTop.jpg) no-repeat;
  width: 12px;
  height: 268px;
  margin: -269px 79px 0px 0px;
  padding: 0;
  border: 0;
}

Answer 4

有同样的问题。设置行高：0px对我有效。

Firefox和Chrome之间的差异为6px

4 个答案: