Закругленные углы контейнера IE6

Question

У меня есть следующий HTML-код, который я использую для создания закругленного контейнера с использованием левого изображения, правого изображения, градиента фона самого контейнера и нижнего изображения, которое на практике обычно является «тенью»

У меня есть следующий html, в нем определены встроенные стили, потому что он генерируется из элемента управления .NET, но я могу проверить браузер и вывести разные стили. Это выглядит идеально в IE 8 и Firefox 3.5, но выглядит ужасно в IE6.

Мне нужно выяснить, как сделать так, чтобы это выглядело прилично в IE6.

<div style="width: 305px; height: 194px;">
<div style="float: left; display: inline; background-image: url(images/LeftSide.png);
    height: 194px; width: 7px;">
</div>
<div style="float: right; display: inline; background-image: url(images/RightSide.png);
    height: 194px; width: 7px;">
</div>
<div style="padding-top: 5px; background-image: url(images/gradient.png);
    background-repeat: repeat-x; width: 291px; height: 194px; margin-left: 7px;">
    <h1> 
        Some text...
    </h1>
</div>

<div style="background: url('../images/small_shadow.png') no-repeat; width:305px;">&nbsp;</div>

Вы можете увидеть пример на https://www.msu.edu/~grossm51/sample/test.html. Заранее спасибо

Answer 1

Лучшее решение для закругленных углов в IE6 (и IE7 / 8) - CSS3Pie .

Это специфичный для IE скрипт, который реализует стандарт CSS border-radius для более старых версий IE.

Answer 2

http://www.curvycorners.net/

Может быть, это вам поможет. Javascript вместо изображений. Работает в IE6.

Бесплатная библиотека JavaScript для создания великолепных закругленных углов для Элементы блока HTML, т.е. DIV. Поддерживает сглаживание, границы и фоновые изображения.

Answer 3

Это похоже на вариацию трехпиксельной проблемы IE 6 с плавающей точкой:

http://www.positioniseverything.net/explorer/threepxtest.html

Чтобы исправить это, попробуйте это. К левому плавающему элементу div добавьте правое поле -3px:

margin: 0 -3px 0 0;

К правому плавающему элементу div добавьте левое поле -3px:

margin: 0 0 0 -3px;

Наконец, в div содержимого удалите объявления полей и ширины.

Answer 4

добавление атрибута стиля

 position: absolute;

слева и градиентные участки сделали свое дело.