如何爲每個瀏覽器呈現相同的邊距？

我有一個HTML5畫布圖像，我已經繪製了一些點，並且我想在點旁邊對齊一些div標籤和文本輸入標籤。如何爲每個瀏覽器呈現相同的邊距？

不幸的是，瀏覽器不同意每個div和輸入標籤之間的空間。

我發現了輸入標記的黑客，通過用CSS指定高度。現在，每個瀏覽器的輸入標籤之間都有相同的空間。看起來輸入標籤的默認高度不一樣取決於瀏覽器，非常非常奇怪。

我試過同樣的事情爲我的div標籤，但我不能爲每個瀏覽器得到正確的路線。 http://jsfiddle.net/baptx/XcKZj/

div標籤定位是不依賴於瀏覽器（配置爲Firefox）相同： http://jsfiddle.net/baptx/92gPY/

我使用的是Firefox

文本輸入標記對齊與CSS破解每一個瀏覽器中工作在Linux上，我注意到Windows版本沒有渲染相同的邊距。當在Linux或Windows上運行時，Chrome也不同意Linux Firefox。 Opera很棒，它總是與在Linux或Windows上運行的Linux Firefox一致。我首先想到的是，這是由於網頁瀏覽器引擎，Gecko的渲染效果與Webkit相比有所不同，但如果Windows和Linux版本的Firefox不同意，應該是別的。

有沒有人和想法它來自哪裏，以及如何解決這個與div標籤？

來源

2012-06-12 baptx

與其說是回答爲什麼，但這是一個很好的理由使用一個CSS復位。 http://www.cssreset.com –

好吧，我學到了一件新東西，感謝stackoverflow社區，CSS重置:) 使用埃裏克邁爾的重置，它會弄亂我的畫布位置http://jsfiddle.net/92gPY/6 /和使用雅虎庫，它不會改變一件事http://jsfiddle.net/92gPY/7/ 現在我試圖只添加梅耶的div復位，但問題仍然在這裏http://jsfiddle.net/92gPY/8/ 有人有一個工作解決方案？ cc @MoinZaman – baptx

爲什麼：因爲規定的樣式表沒有規定邊距等間距。

解決方案：使用CSS重置樣式表，並在您的站點範圍樣式表中顯式聲明您自己的默認值。

下面是一些復位網站：http://www.cssreset.com/

來源

2012-06-12 14:10:37 Marcin

謝謝，但我不能讓它工作http://stackoverflow.com/questions/10998358/why-browsers-do-not-render-same-margins#comment14374009_10998358 – baptx

@baptx你做錯了。包含整個重置樣式表，然後顯式聲明所有您需要爲非零的屬性。 – Marcin

哈哈感謝大家現在正在工作！ http://jsfiddle.net/92gPY/26/埃裏克邁耶的CSS重置做了詭計，我不得不將tr＆td vertical-align設置爲「top」。在此之後，我必須找到div的良好高度/邊距像素以匹配在畫布圖像上繪製點時設置的像素間隔:) 只是一個問題，我聽說使用CSS重置不是一個很好的因爲它會刪除所有樣式，而有些則在這裏使網頁看起來更好。有人說最好使用基本樣式表，例如http：//fvsch.com/code/base-stylesheet/，它只會修正樣式。你怎麼看？ – baptx

這聽起來像你需要包括復位CSS到你的風格。這將有助於統一（但不能完全消除）瀏覽器之間的差異。

這裏有兩個流行復位：

Eric Meyer's reset

YUI Reset

來源

2012-06-12 14:13:57 digitaldreamer

我試過這兩個庫，但我無法獲得跨瀏覽器解決方案http://stackoverflow.com/questions/10998358/why-browsers-do-not-render-same-margins#comment14374009_10998358 – baptx

如何爲每個瀏覽器呈現相同的邊距？

回答

相關問題