Круглый Угол (CSS и JavaScript)

Question

Пожалуйста, перейдите по адресу: http://jlecologia.com/page1c.html, чтобы увидеть проблему

Верхний блок выглядит хорошо, но в IE6 есть double top и bottom border.

Может кто-нибудь указать мне, что я сделал не так?

Или кто-нибудь может сказать мне закругленный прямоугольник javascript, который согласен сделать этот эффект с неравной границей. Я протестировал некоторые из них, и все они провалились, поэтому я сделал круглую рамку, но мне больше нравится javascript-подход jQuery.

Answer 1

Взгляните на плагин JQuery за круглым углом И здесь это демо

Answer 2

В дополнение к изменению, которое вы сделали для нижней границы, установка размера шрифта элемента с классом "top" равным 7px исправляет это в моем IE6.

Answer 3

По умолчанию для фоновых изображений, чтобы они повторялись.

Попробуйте: background: прозрачный URL (../ images / roundbox-top.jpg) 0 0 без повтора;

---

Отредактировано после комментария для предоставления полного решения:

IE6 устанавливает высоту пустых divs для вашего размера шрифта, если высота, указанная в css, меньше размера шрифта.

На #roundbox .top и #roundbox .bottom поставить

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

Это свернет div на нужную высоту.

Answer 4

Попробуйте использовать панель инструментов веб-разработчика в Firefox для проверки CSS и HTML. Я сделал быструю проверку, и в каждой есть несколько ошибок. Я подозреваю, что разница в рендеринге заключается в том, что IE не обрабатывает искаженное содержимое, а также FF. В частности, даже небольшие ошибки в файлах CSS, как правило, приводят к появлению снежного кома в IE и приводят к неправильной компоновке. Не уверен, что IE7 и IE8 сделали какие-либо улучшения в этом отношении.