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

Question

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

Верхний блок выглядит хорошо, но в IE6 есть двойная верхняя и нижняя граница.

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

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

Answer 1

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

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

---

Отредактировано после комментария, чтобы обеспечить полное решение:

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

На #roundbox.top и #roundbox.bottom положить

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

Это разрушит div до правильной высоты.

Answer 2

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

Answer 3

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

Answer 4

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