IE border-radius - конкретная часть по-прежнему квадратная, несмотря на (на первый взгляд) действующее правило CSS - PullRequest
Новая
       0

IE border-radius - конкретная часть по-прежнему квадратная, несмотря на (на первый взгляд) действующее правило CSS

0 голосов
/ 18 апреля 2011

У меня были проблемы с одним div, заголовком моего сайта, который имеет правило: 

div#header {
width:100%;
background-color:#660066;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#330033), to(#990099), color-stop(.5,#660066));
background: -moz-linear-gradient(top, #330033 0%, #660066 50%, #990099 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#330033', endColorstr='#990099',GradientType=0 );
-moz-border-radius: 15px 15px 0px 0px;
-webkit-border-radius: 15px 15px 0px 0px;
border-radius:15px 15px 0px 0px;
-moz-box-shadow: 3px 0px 3px #888;
-webkit-box-shadow: 3px 0px 3x #888;
box-shadow: 3px 0px 3px #888;
}

Тем не менее, в IE9 верхний левый и правый не округляется.В Chrome, Safari и Firefox они есть.

См. Здесь (заголовок div содержит логотип и заголовок "CRGS Share Student File Sharing System")

Doты знаешь в чем может быть причина?Вероятно, я просто нуб.

Полная таблица стилей здесь (это грязно, так как немного в стадии разработки).

Заранее приветствует.

Ответы [ 2 ]

1 голос
/ 18 апреля 2011

Это ошибка в IE 9. Он поддерживает круглые границы, а также градиенты, но не оба одновременно.Это означает, что если вам нужны градиенты, IE 9 покажет это, но проигнорирует закругленные углы.Однако вы можете также создать градиентное изображение и использовать его для браузеров, которые не понимают градиенты.Пример: 

div#header {
width:100%;
border:0px;
background-color:#660066;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#330033), to(#990099), color-stop(.5,#660066));
background-image: -moz-linear-gradient(top, #330033 0%, #660066 50%, #990099 100%);
background-image: url('your gradient image.png') 0 0 repeat;
-moz-border-radius: 15px 15px 0px 0px;
-webkit-border-radius: 15px 15px 0px 0px;
border-radius:15px 15px 0px 0px;
-moz-box-shadow: 3px 0px 3px #888;
-webkit-box-shadow: 3px 0px 3x #888;
box-shadow: 3px 0px 3px #888;
}
0 голосов
/ 25 сентября 2011

Градиент будет выходить за закругленные углы в IE9, поэтому лучшее решение сейчас добавить один дополнительный div: 

 <div class="corners"><div class="gradient"></div></div>

и скрыть переполнение для .corners 

.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

overflow: hidden;
}

Я рекомендую этот Photoshop-подобный инструмент для создания кросс-браузерных градиентов: http://www.colorzilla.com/gradient-editor/

И этот, чтобы создать border-radius: http://border -radius.com /

...