Firefox和Chrome之間有6px的差異

Question

我已經集成了一個圖像以使其與頂部的其他圖像對齊（行），並且Firefox與Chrome或Safari相比有6像素的差異。 我不明白差異的來源，因為我所有其他圖像（行）在所有瀏覽器中都排列整齊。 我的網站：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

有同樣的問題。 設置line-height：0px對我有用。