закругленные углы IE6 - PullRequest
0 голосов
/ 16 июня 2011

Я хочу получить закругленные углы в IE6 - 9 Я использую следующий код CSS для Firefox, Chrome и Safari и работает нормально. Есть ли способ сделать закругленные углы в IE6 без использования фоновых изображений?

код CSS:

.item{

   height:85px;
   line-height: 15px;
    text-align: center;


}

.item-header > div{

}
.item > div {
  background-color: #fff;
  height:85px;
  margin-bottom:10px;

}
.item-header > div:first-child{
    width:88px;
}

.item > div:first-child {
  border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
   border-left:2px solid #ededed;

}

.item-header > div:last-child{

}

.item > div:last-child {
  border-radius: 0 10px 10px 0;
  -moz-border-radius: 0 10px 10px 0;
   border-right:2px solid #ededed;
   margin-top:2px solid #ededed;
     margin-bottom:2px solid #ededed;

}

.itemHeader, .itemBody, .itemFlag, .item-header-content{
    float:left;

}

.itemHeader{
    width:85px;
    padding-top:10px;
    border-top:2px solid #ededed;
    border-bottom:2px solid #ededed;
    float:left;
    height:85px;
}

.itemBody{
    width:80px;
    height:85px;
    padding-top:10px;
    border-left:1px solid #ededed;
    border-right:1px solid #ededed;
    border-top:2px solid #ededed;
    border-bottom:2px solid #ededed;
    float:left;
}

.itemFlag{
    width:80px;
    padding-top:10px;
    border-top:2px solid #ededed;
    border-bottom:2px solid #ededed;
    float:left;
    height:85px;
}

.item-header-content{
    width:82px;
    height:50px;
    float:left;

}
.item-header-content a{
    padding:0px;
    margin:0px;
    text-align: center;
    color:#000;
}

.resize {
width: 80px;
height : auto;
margin-top:10px;

}

.Container-results{
    width:790px;
    border-spacing:0 1px;
    margin-left:1px;
    margin-right:1px;
    margin-bottom:10px;

HTML-код:

<div class="Container-results">

                <div class="item">
                    <div class="itemHeader"> 

                    </div>
                    <div class="itemBody"> <strong style="font-size: 100%; color: #004A9E;">Roadside</strong></div>
                    <div class="itemBody"><div class="tick"><span>included</span></div></div>
                    <div class="itemBody"><div class="tick"><span>included</span></div></div>

                    <div class="itemBody"><div class="cross"><span>not included</span></div></div>
                    <div class="itemBody"><div class="cross"><span>not included</span></div></div>
                    <div class="itemBody"><div class="cross"><span>not included</span></div></div>
                    <div class="itemBody">
                    <strong>&pound;18<sup>.25</sup></strong>
                    </div>

                    <div class="itemFlag">
                    <a class = "btn btn-buy-online-now2" href="/breakdown/buy/58/?id=kwik-fit-insurance_roadside" target="_blank"></a>
                    <a href="/breakdown/more-info/913/?KeepThis=true&amp;TB_iframe=true&amp;height=600&amp;width=765&id=kwik-fit-insurance_roadside" class="thickbox"></a> 
                     </div>
                       </div></div>

Ответы [ 4 ]

0 голосов
/ 16 июня 2011

CSS3Pie - это, безусловно, лучшее решение для получения закругленных углов в IE6 / 7/8. Лучшее в этом то, что он работает со стандартным CSS border-radius, поэтому он полностью прозрачен для пользователя, если он использует любой другой браузер.

Я бы искренне рекомендовал это.

У него есть несколько известных проблем, но вы будете иметь то же самое или хуже с другими доступными решениями.

Однако я также от всей души рекомендую не беспокоиться о том, чтобы все излишества на вашем сайте работали с IE6. Конечно, заставьте сайт работать в этом браузере, но, честно говоря, попытка сделать так, чтобы он выглядел в IE6 так же, как в Chrome и Firefox, будет проигрышной битвой.

[EDIT]

И последнее замечание: я отмечаю, что ваша таблица стилей довольно часто использует селектор 'direct child' (>) - например, .item > div {...}. Обратите внимание, что этот тип селектора не поддерживается IE6. Ваши таблицы стилей будут плохо работать в IE6, как сейчас.

Единственный способ обойти это - использовать только пробел между вашими селекторами для «любого потомка». Это работает, но меняет смысл вашего CSS.

IE6 также не поддерживает :first-child или :last-child, оба из которых вы использовали. Фактически, у вас будут проблемы с обоими в IE7 и IE8 - :last-child вообще не поддерживается ни в одной версии IE, кроме IE9, и хотя first-child поддерживается в IE7 и IE8, он имеет серьезные ошибки, если вы используете его в динамическом контенте.

0 голосов
/ 16 июня 2011

Посмотрите здесь: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers и здесь: http://snook.ca/archives/html_and_css/rounded_corners_experiment_ie/

Если у вас запущен IE6, обязательно попробуйте демо-версию со второй ссылки (здесь: http://snook.ca/technical/rounded_corners/).

У меня нет IE6, поэтому я не могу сказать вам, работает ли он.

0 голосов
/ 16 июня 2011

Вы можете попробовать "Nifty Corners", должен работать на IE6->

http://www.html.it/articoli/nifty/index.html

0 голосов
/ 16 июня 2011

К сожалению, нет. IE 6-8 не включает никакой поддержки границы радиуса. Ваши единственные решения:

  • Точно знайте, какой высоты и ширины ваш div, и используйте прозрачный фон PNG, который все еще не будет работать в IE6. (не очень хорошая идея, делает ваш макет и размеры очень негибкими)
  • Ужасно загрязняйте вашу разметку изображениями и вложенными div, пытаясь это сделать. (ты тоже не хочешь этого делать)
  • Используйте библиотеку JavaScript, такую ​​как CurvyCorners: http://www.curvycorners.net
...