跨瀏覽器的背景圖像位置的細微差異

在http://onpole.org/roland/上，我用背景圖像來裝飾頁面。我，我自己，使用Mozilla Firefox，所以我創建了我的CSS瀏覽器。但是，如果我在不同的瀏覽器（Chrome，Safari，還沒有試過IE）中打開同一個網站，我會發現細微的差異，這會破壞佈局。跨瀏覽器的背景圖像位置的細微差異

例子：

（這個實際上是在Firefox錯誤）

在頁面的頂部，有一個圖，其中白線出來並下降，進入下一環節的網站。
在Firefox中有一個錯誤，當談到接下來的部分， see this

但在Safari和Chrome這條線是正確的！

See this

我會發布更多的例子，但apparantly我的名聲太低後超過2個鏈接。有具體的。

還有一部分有箭頭出來的線。這在Firefox中運行良好，但在Safari和Chrome中都有錯誤。

因此，第一個錯誤在Firefox中不正確，但在Safari和Chrome中正常工作。第二個錯誤正好相反。

我在這裏發佈這個，因爲我需要如何解決這些問題的建議。我應該讓瀏覽器特定的CSS移動1行像素嗎？或者還有其他方法嗎？或者你們有沒有知道爲什麼會出現這些差異？

來源

2013-10-08 user1806603

像這樣分割圖像，然後嘗試將它們重新排列在一起是一種災難，最好避免。有辦法讓這些背景顏色工作，同時保持線條圖像完好無損，所以我建議你追求這條道路。 –

我想我明白你的意思了。我可以不把這些圖片分割開來，這樣他們就可以對齊。但是網站上有一部分可以在高度上增長/縮小，所以白線必須是可重複的。我認爲，這仍然是一個問題。對？ – user1806603

我想這是一個問題。我要麼重新考慮你期望發生的事情，要麼嘗試使用'background-size'屬性。 –

只是一個建議，但爲什麼不創建一個單獨的樣式表？當我幫助重新設計我公司的網站時，我的主管和我發現我們的樣式表在Chrome中正確呈現，但不在Firefox中呈現。最終我們創建了一個樣式表來修復這些區域。只有當瀏覽器使用Firefox時纔會啓動。

使用簡單PHP命令（假設你的Gecko樣式表將被存儲在一個名爲CSS在您的網站的主要模板目錄文件夾中），這裏是如果所使用的瀏覽器，你如何可以檢測器是Firefox這將迫使該Gecko樣式表的頁面之前推出，甚至裝：

// firefox 
if ($this['useragent']->browser() == 'firefox') { 

    // add gecko stylesheet 
    $this['asset']->addFile('css', 'css:gecko.css'); 

}

重要：當寫意味着基於Gecko的瀏覽器只，紙張必須寫一個樣式表如下：

@-moz-document domain(YOUR-DOMAIN.com) { 

    /* ADD YOUR CSS HERE */ 

}

只會在Firefox中讀取{ }之間的代碼。最棒的是，如果你想在你的網站上定位特定的子域名，你可以在同一個樣式表上爲這個子域名添加一個聲明。

@-moz-document domain(YOUR-DOMAIN.com) { 

    /* ADD YOUR CSS HERE */ 

} 

@-moz-document domain(SUBDOMAIN.YOUR-DOMAIN.com) { 

    /* ADD YOUR CSS HERE */ 

}

只要記得把身體捲曲{ }括號內的規則，你會好到哪裏去。

來源

2013-10-08 23:48:56 DaveyJake

感謝您的回答，是的，這將工作。但我發現差異不是恆定的。例如;我只是修復了FireFox中的錯誤，然後稍微改變了瀏覽器的大小，然後又出現了錯誤！所以即使我製作了單獨的樣式表，問題依然存在.. – user1806603

跨瀏覽器的背景圖像位置的細微差異

回答

相關問題