Ich bin auf einer kürzlich erschienenen Seite darauf gestoßen. Ursprünglich wollte ich Rahmen verwenden, um den gepunkteten Linieneffekt der Entwurfszeichnung zu simulieren, aber es ist offensichtlich, dass der Rahmeneffekt nicht so gut aussieht wie die Entwurfszeichnung. Übrigens habe ich den Unterschied zwischen gestrichelt und gepunktet studiert.
Um es wörtlich zu verstehen, beziehen sich gestrichelte und gepunktete Linien zunächst auf „gepunktete Linien“. Der Unterschied zwischen ihnen ist:
gestrichelt: aus demh eine gestrichelte Linie, die aus demh besteht
gepunktet: von Punkt (Punkt), eine aus Punkten bestehende gepunktete Linie, auch gepunktete Linie genannt
Noch ein paar unsinnige Worte. Tatsächlich können Sie ein intuitiveres visuelles Erlebnis erhalten, wenn Sie sich die Demo ansehen.
Lassen Sie uns nun über die damit verbundenen Fehler sprechen. Natürlich treten diese Fehler wiederum nur unter IE auf, hier unter IE6 und IE7.
Fehler 1: Unter IE6 verhält sich ein Punkt mit einer Breite von 1 Pixel genauso wie ein Strich. Wenn die Breite größer als 1 Pixel ist, verhält es sich normal.
Bug2: Wenn unter IE7 die Breite der vier Seiten 1 Pixel beträgt und ein anderer Wert gleichzeitig vorhanden ist, verhält sich 1 Pixel gepunktet genauso wie gestrichelt. Dieser Fehler tritt nicht auf, wenn die Breite aller vier Seiten 1 Pixel beträgt oder andere Werte als 1 Pixel vorliegen.
Fehler 3: Darüber hinaus wird unter IE6 beim Ziehen der Seite manchmal der 1 Pixel große gepunktete oder 1 Pixel große gestrichelte Rand zu einer durchgezogenen Linie verbunden, und manchmal treten Lücken auf.
Um diese Fehler zu beheben, verwenden Sie entweder keine Punkte, sondern stattdessen Bilder oder verwenden Sie zusätzliche Tags und Codes, um sie zu beheben.
Da diese Fehler nur auftreten, wenn die Rahmenbreite 1 Pixel beträgt, können Sie die Rahmenbreite des äußeren umgebenden Tags auf 2 Pixel festlegen, ein inneres Tag hinzufügen, es auf einen 1 Pixel großen Hintergrundfarbrand für den Inhalt festlegen und dann margin-top/right/ festlegen. unten/links: -1px; um den 1px-Rand um das äußere Etikett abzudecken, um normale visuelle Effekte zu erzielen. Sehr ausführlich, nervig und hilflos.
.b6 {
Rand: 2px gepunktet #000;
Polsterung oben: 0;
}
.b6 .inner {
Rand: 1px einfarbig #9c9c9c;
Breite: 100 %;
Höhe: 100 %;
Rand: -1px;
Position: relativ;
Z-Index: 100;
}
Weitere Informationen finden Sie in der Demo
Originaltext: http://www.qianduan.net/ie-bug-1-pixel-dotted-and-dashed-border.html