爲什麼我必須針對同一個css使用前綴來解決不同的瀏覽器？

Question

我很好奇，至於爲什麼一些瀏覽器需要一個特殊的邀請，爲相同的CSS佈局命令。 任何人都可以啓發我嗎？

示例：CSS格式： box-sizing：border-box; （請考慮我的盒子的維度邊界！）

現在來到這裏，Firefox和Safari，他們需要一個特殊的邀請：

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 

爲了一個簡單的貓喜歡自己，這似乎是說：

1. 瀏覽器：我給你的尺寸算上了我的盒子的邊框！火狐：這也算你的。
2. Safari：它也適合你。

我的意思是......爲什麼？它的語法完全相同！爲什麼我必須將相同的東西告訴給特定的瀏覽器？我會明白，如果他們需要不同的語法..但完全一樣？！他們喜歡聽到他們的名字被稱爲？

Answer 1

因爲這些屬性沒有被W3C所標明，所以它們仍然在草稿中，因此供應商實現了自己的版本 - 使用前綴來避免與其他瀏覽器實現衝突，或者在規範定稿後最終實現。

Answer 2

這是不同的瀏覽器引擎支持不同的結果。這些指令的目的僅僅是告訴瀏覽器的渲染引擎你正在使用一個仍處於開發/測試階段的功能，或者是CSS規範中的標準功能。請注意，並非所有瀏覽器都使用不同的渲染引擎。

Answer 3

我相信，起初每個瀏覽器製造商都認爲css風格是個好主意，但是沒有標準。每個瀏覽器製造商都以他們的前綴添加了CSS樣式。最終，這些樣式中的大部分都已經成爲CSS3標準（通常基於瀏覽器製造商已經在做什麼），但由於舊版瀏覽器不支持CSS3標準（只有他們的標準和前綴），我們仍然使用每種瀏覽器的語法/字首。

Answer 4

它意味着這個功能仍在開發中，可能並不支持所有該標準規定

Answer 5

的除上述答案的功能。當你列出所有屬性，列出了標準屬性最後，像這樣：

-moz-border-radius: 10px 5px; 
-webkit-boder-radius: 10px 5px; 
border-radius: 10px 5px; 

如果你做這種方式，一箇舊的Firefox將使用第一個規則，而忽略其他人，因爲它不理解他們，在舊的Safari也一樣。

的問題帶有最新版本的瀏覽器，它支持border-radius沒有前綴的，當你列出的標準屬性第一：

border-radius: 10px 5px; 
-moz-border-radius: 10px 5px; 
-webkit-boder-radius: 10px 5px; 

當你瀏覽此網站在Safari瀏覽器，它會首先使用標準屬性，然後用-webkit-屬性覆蓋它。問題是這兩種實現的規格是不同的。標準屬性使左上角和右下角30px-圓形，右上角和左下角10px-圓形。

另一方面，-webkit前綴屬性使所有角都相同：一個大小爲30x10px的省略號。