Gradient + Rounded Corner Проблема CSS в IE9

В моем текущем проекте я использовал градиент CSS3 в своем файле CSS. Для поддержки браузера IE я использовал свойство фильтра. Ниже мой код:Gradient + Rounded Corner Проблема CSS в IE9

.card.active .content.back { 
    background: #333; /* Old browsers */ 
    background: -moz-linear-gradient(top, #333 0%, #0e0e0e 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, #333 0%,#0e0e0e 100%); /* IE10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0); /* IE6-9 */ 
    background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */ 

}

Но когда я использую filter свойство в коде выше border-radius свойство не работает. Если кто-нибудь знает об этом, поделитесь им со мной.

Благодаря

источник

2012-05-17 Mujahid

Вы можете использовать PIE.htc для ваши желаемые результаты.

PIE означает прогрессивный Internet Explorer. Это поведение, связанное с IE, которое при применении к элементу позволяет IE распознавать и отображать ряд свойств CSS3.

РАССТЕГАЙ в настоящее время добавляет полную или частичную поддержку IE 6 по 8 для следующих функций CSS3:

border-radius 
box-shadow 
border-image 
multiple background images 
linear-gradient as background image

Кроме того, PIE добавляет поддержку пограничным образ и линейный градиент в IE 9, который уже поддерживает другие функции изначально.

http://css3pie.com/

или посмотреть демо: - http://jsfiddle.net/ZxzSs/1/

для поддержки PIE.htc вы должны сохранить файл PIE.htc на корневой папке, чем будет работать для вашего сайта ....

источник

2012-05-17 06:48:49

Привет @Shailender: Я уже использую CSS3Pie, но проблема в том, что когда я использую его с свойством 'filter', область div не получает свойство border-radius в IE9. Хотя спасибо за ваш ответ, знаете ли вы способ применить граничный радиус для контейнера, который использует фильтр для получения градиентного фона Спасибо – Mujahid

@Mujahid, если вы используете CSS3PIE, поэтому вам не нужно использовать какой-либо фильтр потому что через PIE.htc вы можете получить все результаты, такие как: - border-radius, box-shadow & gradient в IE и его поддержка до IE6 до IE9 ..... и почему вы используете свойство filter, если у вас есть другое решение? –

@Shailendar: Собственно свойство фильтра, используемое предыдущим разработчиком, и я не знаю, почему он это сделал. У меня возникла проблема, когда я наводил курсор мыши на веб-страницу, контейнер, в котором используется свойство свойства filter, изменяется на белый. Поэтому я удалил свойство 'filter' и использовал PIE.htc и проблему. Но в моем приложении область div изменяется на -8 градусов. Когда я использую PIE.htc, степень трансформации, получающая изменение – Mujahid

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

.element { 
    background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */ 
    border-radius: 10px; 
} 
.element .ie-helper { 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0); 
}

HTML:

<div class="element"> 
    <!--[if lt IE 9]><div class="ie-helper"><![endif]--> 
    <p>Your content with gradient and rounded corners...</p> 
    <!--[if lt IE 9]></div><![endif]--> 
</div>

Если страница просматривается в IE10 + или других браузерах, как градиент и закругленные углы будет применяться к тому же элементу (при условии, что вы вернете префиксы, относящиеся к конкретному поставщику, из вашего образца кода). Внутренний div.ie-helper будет отображаться только на IE9 и ниже из-за используемого conditional comments.

Это не идеально, но будет получить работу, но так как вы после такого широкого диапазона браузеров, чтобы быть полностью поддерживает это разумный обходной

источник

2012-05-17 06:48:22

Gradient + Rounded Corner Проблема CSS в IE9

ответ

Смежные вопросы