CSS Reset: Web-Seiten mit einem wirklich Cross-Browser-Stil

In diesem kurzen Artikel werden wir sehen, was CSS die Technik der CSS-Reset und wie man am besten nutzen, um wirklich Cross-Browser Web-Seiten zu erstellen.

CSS Reset: was sie sind und was sie sind

Erstellen Sie vollständig Cross-Browser Web-Seiten ist ein Problem, das seit mehreren Jahren (dh, wenn Internet Explorer nicht mehr mit einem Marktanteil von 95%) wirkt sich auf alle Web-Designer. Aber selbst wenn das Ergebnis mit allen Browsern kompatibel ist (Sie müssen nicht, dh, Störungen oder Mängeln in der Lage, die die Nutzbarkeit des Dienstes angezeigt), wird die Ausgabe der Web-Seite fast immer unterschiedlich, je nachdem, ob mit IExplorer angesehen , Firefox, Safari, Chrome oder Opera.

Ich freue mich über kleine Unterschiede, manchmal kaum wahrnehmbar reden, aber dennoch beinhalten eine Abkehr von den Erwartungen des Endergebnisses der Web-Designer (zum Beispiel, weil der Raum zwischen zwei Elementen ist etwas größer als ein Browser auf ein anderes).

Dieses Problem wird durch die Standardeinstellungen der einzelnen Navigations-Software, die Unterschiede, mehr oder weniger bemerkbar, wenn Sie die Web-Seite machen zu beteiligen.
Um dieses Problem zu greifen wir auf eine Technik, genannt CSS Reset ist, die besteht im Wesentlichen, eine Reihe von Anweisungen in der Verwendung von CSS, um "reset" die Standardeinstellungen in den einzelnen Browsern zu lösen.

CSS Reset: eine einfache Lösung

Eine Lösung, nicht raffiniert, ist es der Beginn einer Stylesheet-Regel, dass bricht erklären, für jede Seite Element, in der Regel eine Reihe von Attributen von Browsern definiert werden (wie zum Beispiel margin, padding)

 



 * {



  



 margin: 0;



  



 padding: 0;







 }

 

oder:

 



 * {



  



 margin: 0;



  



 padding: 0;



  



 border: 0 none;



  



 Gliederung: 0;







 }

 

oder, noch aufwändig:

 



 * {

 

  



 vertical-align: baseline;



  



 font-weight: erben;



  



 font-family: inherit;



  



 font-style: erben;



  



 font-size: 100%;



  



 margin: 0;



  



 padding: 0;



  



 border: 0 none;



  



 Gliederung: 0;







 }

 

In der Tat kann ich nicht empfehlen die Verwendung dieser einfachen Lösungen wie die Verwendung des universellen Selektor (Stern), Ergebnisse nicht immer optimal führen können.

• <<
• 1
• 2
• >>