HTML/CSS: Ein Element, 1 Pixel hoch, 100% breit, 0 Bilder, einfarbig, alle Browser

Ich suche nach einem Weg, etwas zu tun, das sollte super einfach sein, aber ich könnte nicht 't finde es heraus ...HTML/CSS: Ein Element, 1 Pixel hoch, 100% breit, 0 Bilder, einfarbig, alle Browser

Ich möchte ein grafisches Element auf meiner Webseite, die ist genau 1 Pixel hoch, 100% breit und hat eine bestimmte Farbe, sagen wir rot. Es sollte in jedem Browser genau gleich aussehen und sollte die Semantik vorzugsweise nicht zu sehr durchbrechen.

Ich möchte keine Bilder dafür verwenden und ich möchte nicht mehr als ein HTML-Element verwenden. Natürlich werde ich kein JavaScript verwenden.

habe ich versucht, die alten Klassiker, die viele von Ihnen wahrscheinlich wissen:

<div class="hr"></div> 

<style ...> 
.hr { 
    height: 1px; 
    background: red; 
    width: 100%; 
    font-size: 1px; /* IE 6 */ 
} 
</style>

Das Problem mit der obigen Lösung ist, dass IE6 dies als zwei oder drei Pixel hoch machen wird, die nicht vorhandenen Inhalte zu passen die div.

Irgendwelche Ideen?

Quelle

2009-08-11 Deniz Dogan

Hinzufügen eines Überlaufs: versteckt; Stil sollte es auch beheben.

Quelle

2009-08-11 16:03:11 Meep3D

Hat super funktioniert, vielen Dank. –

tun nur

.hr { 
    height: 0px; 
    margin: 0px; 
    border-bottom: 1px solid #FF0000; 
    font-size: 1px; 
}

ich durch die gleiche Sache ging, als ich CSS neu war.

Quelle

2009-08-11 16:01:53

Heh, ich habe beruflich mit CSS arbeitet über ein Jahr, aber erst jetzt muss ich IE6 unterstützen ... :) –

Das Problem mit dieser Lösung ist, dass ich nicht in der Lage bin, eine Marge auf der 'div.hr' richtig einzustellen, es verhält sich wirklich seltsam in IE6. –

Oh, Entschuldigung für meine Annahmen. Ich hasse es auch mit IE6 zu tun. Ich versuchte @ Meep3D's Lösung und es funktionierte, könnte mit ihm gehen wollen: P –

Ich habe IE6 nicht, um dies zu testen, aber ich erinnere mich, dass es etwas mit der Zeilenhöhe zu tun hatte. Hast du das versucht?

Quelle

2009-08-11 16:05:21

Ich habe IE6 nicht zum Testen, aber ein aktuelles HR-Tag kann in modernen Browsern funktionieren. Hatte mir ein paar versucht man die Hintergrundfarbe nicht die Rahmenfarbe zu realisieren:

hr { width:75%; height:1px; background-color:#ebebeb; border:none; margin:1.5em auto; }

(justieren entsprechen)

Quelle

2010-02-01 22:00:03 Anentropic

HTML/CSS: Ein Element, 1 Pixel hoch, 100% breit, 0 Bilder, einfarbig, alle Browser

Antwort

Verwandte Themen