Round Corner (CSS und JavaScript)

Question

Bitte gehen Sie zu: http://jlecologia.com/page1c.html das Problem zu sehen

Die Top-Box sieht gut aus, aber in IE6 gibt es eine Doppeloben und Boden Grenze.

kann mir jemand zeigen, was ich falsch gemacht habe?

Oder kann mir jemand sagen, ein JavaScript runden Box, die akzeptieren, dass der Effekt mit der Grenze, die ungleich ist zu tun. Ich habe einige Tests und alle scheitern, also habe ich das Bild Runde Box gemacht, aber ich mag die jQuery Javascript-Ansatz besser.

Answer 1

Der Standard für Hintergrundbilder, um sie wiederholen zu müssen.

Versuchen: Hintergrund: transparente URL (../ images/roundbox-top.jpg) 0 0 keine Wiederholung;

---

nach Kommentar Editiert volle Lösung zu bieten:

IE6 setzt die Höhe des leeren divs auf Ihren font-size, wenn die Höhe in der CSS-Angabe weniger als die Schriftgröße ist.

Auf #roundbox .top und #roundbox .bottom, setzen

font-size:0; 
line-height:0; 

, dass die div auf die richtige Höhe kollabiert.

Answer 2

Probieren Sie die Webentwicklersymbolleiste in Firefox aus, um CSS und HTML zu validieren. Ich habe einen kurzen Check gemacht und es gibt mehrere Fehler in jedem. Ich vermute, dass der Rendering-Unterschied darin besteht, dass der IE nicht mit fehlerhaftem Inhalt und FF zurechtkommt. Vor allem kleine Fehler in CSS-Dateien neigen dazu, im IE zu verschnaufen und ein ansonsten gutes Layout zu schmelzen. Nicht sicher, ob IE7 und IE8 in dieser Hinsicht Verbesserungen vorgenommen haben.

Answer 3

Werfen Sie einen Blick auf die jQuerys round corner plugin Und here ist eine Demo

Answer 4

Zusätzlich zu der Änderung, die Sie für den unteren Rand vorgenommen haben, wird die Schriftgröße des Elements mit der Klasse "top" auf 7px festgelegt und in meinem IE6 behoben.