Question

我正在使用mozilla和chrome和edge作为主要资源制作我的网站，看看它是否动态运行良好。

但是当我打开IE浏览器我的css时，就像“转换”所有格式都以奇怪的方式格式化，它们原来在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＆amp; Site Point

Answer 2

编写CSS或JS时，您需要检查浏览器兼容性表以了解您使用的功能。您可以在官方资源网站上找到此信息，例如https://www.w3schools.com/cssref/css3_browsersupport.asp

特别是对于变换，请查看：https://www.w3schools.com/cssref/css3_pr_transform.asp

您需要使用与您希望支持的所有浏览器兼容的功能（考虑到他们的版本），或者如您所述，通过检测用户可用的功能来编写代码备选方案＆＃ 39;浏览器。像https://modernizr.com/这样的工具可以帮助解决这个问题。

Css跨浏览器代码

2 个答案: