<div style='width:500px; height:500px; padding:50px;'> </div>
Da die Verhaltensweisen von 'Padding' auf IE und Firefox sind unterschiedlich. Was ist der beste Weg, um dieses Problem zu lösen?Der beste Weg, um das "Padding" CSS-Problem zu lösen
Die IE-Box-Modell (bekannt als das traditionelle Box-Modell), enthält die Polsterung und Rand in der Breite/Höhe eines Elements.
Unter dem IE-Box-Modell, eine Box mit einer Breite von 100px, mit 2px Polsterung auf jeder Seite, einem 3px Rand und 7px Rand auf jeder Seite, wird eine sichtbare Breite von 114px haben.
Das W3C-Box-Modell (das ist das Standard-Box-Modell), schließt die Füllung und den Rand von der Breite/Höhe eines Elements aus.
Unter dem W3C-Box-Modell wird eine Box mit einer Breite von 100px, mit 2px-Füllung auf jeder Seite, einem 3px-Rand und 7px Rand auf jeder Seite, eine sichtbare Breite von 124px haben.
Box Models http://www.456bereastreet.com/i/box-model.gif
Um IE zu machen verwenden Sie die W3C-Box-Modell (das, was jeder andere Browser verwendet), um Ihre Seite muss im Strict-Modus wiedergegeben werden. Standardmäßig rendert IE im Quirks-Modus.
Um den Strict-Modus im IE auszulösen, müssen Sie einen Doctype angeben. Sie können eine der folgenden doctypes verwenden:
HTML4 Strenge:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd" >
XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DocType das sein muss, Das erste, was auf Ihrer Seite erscheint. Es ist sogar vor dem Tag, in einer eigenen Zeile.
Mehr Informationen über Quirks/Strict-Modus hier:
nicht nur die Verhaltensweisen unterscheiden sich zwischen Firefox und IE ... sie sind verschieden, auch zwischen den verschiedenen Versionen des IE .
Der beste Ansatz besteht darin, CSS-Selektoren anstelle von Inline-Stilen zu verwenden und IE-bedingte Kommentare zu verwenden, um verschiedene Stylesheets basierend auf der Browserversion zu laden. Es ermöglicht Ihnen, ein Master Stylesheet zu erstellen und dann alle Anomolies in den anderen zu beheben.
Eine weitere Option ist in einem bedingten Kommentar für einen bestimmten Browser mit zum Beispiel, dass du Probleme zu stellen:
<!--[if IE 6]>
<style type="text/css">
#thisdiv { width:500px; height:500px; padding:50px; }
</style>
<![endif]-->
Ich bin nicht sicher, ob dies der beste Weg ist, aber ich glaube nicht, dass jemand hat das wirklich herausgefunden. Ich denke, wir alle tun unser Bestes und hoffen, dass die Dinge mit der Zeit besser werden, also wird dieses Zeug nicht gebraucht.
Wie sind sie "anders"? –
Bitte beziehen Sie sich auf Andrew's Post. Es erklärt sehr deutlich. – Alan