Die Rendering-Methode des Border-Attributs im Browser wurde in der QQ-Gruppe schon lange diskutiert, und ich habe immer border:0 none verwendet, um damit umzugehen. Natürlich gibt es auch Gründe, warum ich es tue. Dieser Grund wird in der folgenden Analyse erwähnt. Vor der Analyse der Randeigenschaften müssen einige Punkte erläutert werden:
Um die Rahmenstile besser vergleichen zu können, wählen wir hier das Element „Button“, die verwendeten Tags sind jedoch unterschiedlich. Es handelt sich um Eingabe-Tag-Elemente und Button-Tag-Elemente. Übrigens muss erwähnt werden, dass diesen beiden Beschriftungselementen in verschiedenen Browsern gemeinsam ist, dass es sich bei ihnen um Systemsteuerungselemente handelt. Der Rahmenstil und der Schaltflächenhintergrund stehen in einer absoluten Beziehung zum Systemthema.
Vergleichen Sie den FF-Browser und den IE-Browser unter Verwendung desselben XHTML-Strukturcodes.
<input type="button" value="Button" />
<hr />
<button>Schaltfläche</button>
Demonstrationsanimation 1 Demonstrationsanimation 2
Durch den Einfluss des Standardstils des aktuellen Systemthemas haben wir festgestellt, dass der IE-Browser bereits einen kleinen Unterschied in der Analyse der beiden Tag-Elemente Schaltfläche und Eingabe aufweist, jedoch in Bezug auf die Seite, die im aktuellen Systemthema angezeigt wird betroffen, Der Leistungseffekt ist fast der gleiche. Schüler, die an diesem Punkt interessiert sind, können selbst experimentieren. In den Attributergebnissen in der obigen Spalte ohne CSS-Stildefinition erhalten wir folgendes Ergebnis:
*FF-Browser: Die Rahmenstile von Eingabe-Tags und Schaltflächen-Tags sind border-width:3px; border-style:outset;
* IE-Browser: Der Rahmenstil der Eingabebeschriftung ist border-width:2px; border-style:outset und der Rahmenstil der Schaltflächenbeschriftung ist border-width:2px;
Schauen wir uns anhand dieser Daten an, wie das Ergebnis aussehen wird, wenn wir einen Stil für das Rahmenattribut definieren.