如果瀏覽器的元素檢查器顯示元素的寬度爲300px，我能確定它在所有瀏覽器中都是相同的嗎？

在上面的截圖，谷歌瀏覽器（元件/網絡）檢查員工具顯示一個菜單項的尺寸是547由308個像素。

現在，我可以確定所有現代瀏覽器（IE9及更高版本，Chrome，Opera，Firefox）是否也能通過同樣的維度識別菜單項？如果不是，它是如何變化的？（例如字體渲染？）

編輯：我是否使用CSS重置樣式表。更具體地說，我使用Normalize.css，這很流行。

2012-12-20 its_me

除非您使用非常好的CSS重置/標準化，否則無法確定。 – Jawad

@Jawad是的。我正在使用[Normalize.css]（https://github.com/necolas/normalize.css/）v1.0.2。 –

在這種情況下，它們應具有相同的尺寸。你還應該看看box-sizing屬性，並確保該屬性的默認值包含在CSS Reset/Normalize中。 – Jawad

除非你指定width: 547px; height: 308px那麼沒有。如果您允許元素根據後代元素的大小進行縮小和增長（並且後代的尺寸不受固定寬度或高度的限制），則會有所不同。

您永遠無法確定用戶如何根據字體大小（某些用戶喜歡更大的字體大小以便閱讀）來配置瀏覽器。您甚至不能確定用戶是否指定了字體系列，並且他們的默認字體可能會比您期望的更寬或更窄的字形。

2012-12-20 17:43:15 cimmanon

事實上，即使在同一個系統上，每個瀏覽器的字體也可能不同，因爲每個瀏覽器都有自己的字體渲染引擎，有時甚至可能會增加或減少幾個像素。 – Zefiryn

你不能確定。原因是瀏覽器有所謂的用戶代理樣式表。這些都是瀏覽器可以設置的默認樣式，無論他們想要什麼。例如，Chrome的用戶代理樣式表定義了p標籤的頂部和底部邊距。

爲了確保您顯示的內容相同，您需要覆蓋用戶代理樣式表。最好的方法是使用CSS重置樣式表，它試圖刪除瀏覽器定義的任何屬性。

你可以閱讀所有關於用戶代理樣式表here。和here are some CSS reset stylesheets。

2012-12-20 17:37:14 jmeas

跨不同瀏覽器的不同盒子模型呢？這不會影響返回的大小嗎？ – Deleteman

@Deleteman只有IE的特定舊版本使用「不同的盒子模型」。只更改盒子模型會改變瀏覽器通過計算（或不計算）邊距/填充/邊框來計算完成的「盒子」尺寸的方式。 – cimmanon

回答