Css跨瀏覽器代碼

Question

我使我的網站使用mozilla和鉻和邊緣作爲主要資源，看看它是否動態工作良好。

但是，當我打開IE瀏覽器我的CSS，就像「變換」所有格式奇怪的方式，他們原來的地方不再是在IE中相同。

有沒有辦法讓CSS做每個瀏覽器的選擇或限制，就像Chrome一樣使用「變換」，然後在IE上使用「正確」。

我不能在Chrome上使用「right」，否則它會被格式化，所以我想知道是否有特殊情況。

Answer 1

在編寫CSS或JS你要檢查瀏覽器的兼容性表爲您使用的功能。您可以在官方網站上的資源，如https://www.w3schools.com/cssref/css3_browsersupport.asp

特別是對於變換找到這個，看看：https://www.w3schools.com/cssref/css3_pr_transform.asp

你要麼需要使用可在所有你希望支持的瀏覽器兼容的功能（考慮到它們的版本），或者如您所述，通過檢測用戶瀏覽器中可用的功能來替代代碼。諸如https://modernizr.com/之類的工具可以爲此提供幫助。

Answer 2

使用下面的黑客瀏覽器規範。

google chrome: 

@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
    #element { properties:value; } 
} 

firefox: 

@-moz-document url-prefix() { 
    #element { properties:value; } 
} 
Opera: 
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
    #element { properties:value; } 
} 
safari: 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #element { properties:value; } 
} 
Internet Explorer 9 and lower : 
<!--[if IE]> 
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> 
<![endif]--> 
Internet Explorer 10 & 11 : 
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
    /* IE10+ CSS styles go here */ 
} 
Microsoft Edge 12 : 
@supports (-ms-accelerator:true) { 
    /* IE Edge 12+ CSS styles go here */ 
} 

併爲今後的細節和規格請參閱以下鏈接W3school & Site Point