CSS跨瀏覽器代碼

Question

我使用mozilla和chrome和edge作為主要資源來制作我的網站，以查看它是否動態良好地工作。

但是，當我打開IE瀏覽器的css時，例如“ transforms”（格式全部轉換為奇怪的格式），它們在IE中的原始位置不再相同。

有沒有辦法讓css對每個瀏覽器進行選擇或限制，例如chrome，它使用“ transform”，然后在IE上將使用“ right”。

我無法在chrome上使用“ right”，否則它將被格式化，因此，我想知道是否有特殊情況。

Answer 1

針對瀏覽器規范使用以下技巧。

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

Answer 2

在編寫CSS或JS時，您需要檢查瀏覽器兼容性表中所使用的功能。 您可以在官方資源網站（例如https://www.w3schools.com/cssref/css3_browsersupport.asp）上找到此文件。

特別是對於轉換，請查看： https : //www.w3schools.com/cssref/css3_pr_transform.asp

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