Css Cross-Browser-Code

Question

Ich machte meine Website mit Mozilla und Chrom und Edge als Hauptressource, um zu sehen, ob es gut funktionierte dynamisch.

Aber als ich den IE-Browser öffnete meine CSS, wie "transformiert" wo alle auf eine seltsame Weise formatiert, die Orte, wo sie ursprünglich waren nicht mehr die gleichen in IE.

Gibt es eine Möglichkeit, css eine Auswahl oder Einschränkung für jeden Browser zu machen, wie für chrome Es verwendet "transform" dann auf IE würde es "richtig" verwenden.

Ich kann nicht "richtig" auf Chrom verwenden oder es wird desformatted, so würde ich gerne wissen, ob es eine besondere Bedingung gibt.

Answer 1

Wenn CSS oder JS Schreiben werden Sie wollen Browser-Kompatibilität Tabellen für die Funktionen überprüfen, die Sie verwenden. Sie können dies auf der offiziellen Ressource Websites finden wie https://www.w3schools.com/cssref/css3_browsersupport.asp

Für Transformationen insbesondere einen Blick auf: https://www.w3schools.com/cssref/css3_pr_transform.asp

Verringern Sie entweder Funktionen verwenden, die in allen Browsern kompatibel sind, die Sie unterstützen möchten (unter Berücksichtigung ihrer Versionen) oder, wie Sie bereits erwähnten, Code-Alternativen, indem Sie erkennen, welche Funktionen im Browser Ihres Benutzers verfügbar sind. Ein Tool wie https://modernizr.com/ kann dabei helfen.

Answer 2

Verwenden Sie folgende Hacks für Browser-Spezifikation.

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 */ 
} 

Und für zukünftige Details und Spezifikationen siehe folgende Links W3school & Site Point