Использование CSS3Pie htc для border-radius в IE8

Question

Я использую CSS3Pie htc файл, чтобы включить border-radius в IE8, но я не получаю никакого эффекта. Мой CSS это:

button {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    behavior: url(PIE.htc);
}

Я поместил PIE.htc в публичный корень (как это делается на демонстрационной странице CSS3PIE), попробовав в той же папке, используя относительный и абсолютный uri.

Демо работают; просто не мой код!

Спасибо, Адам

Answer 1

Попробуйте добавить

position:relative;
z-index: 0;

, как предлагается здесь http://css3pie.com/forum/viewtopic.php?f=3&t=10

Этот вопрос похож на тот, который был опубликован здесь:

CSS3 PIE - Giving IEподдержка границы радиуса не работает?

Answer 2

URL-адрес файла PIE.htc, на который ссылается behavior: url(PIE.htc);, является относительным URL-адресом, поэтому он, вероятно, ищет его в том же каталоге, что и таблица стилей, поэтому я предлагаю добавить косую черту, чтобы сделать его абсолютным URL-адресом. Но вы говорите, что уже сделали это.

Убедитесь, что указанный вами URL действительно загружает файл PIE.htc - т.е. поместите этот URL прямо в браузер и посмотрите, что получится. Возможно, ваш веб-сервер неправильно обслуживает его по той или иной причине (не распознает тип mime? И т. Д.)

Перешли ли вы через известные проблемы на сайте PIE ? Вы добавили position:relative; в свой стиль? Это может быть известная проблема z-index

Вы указываете, что он не работает в IE8. Вы пробовали это в IE7? IE6? Тот же результат? (это исключит возможность того, что это проблема IE8)

Кстати - несвязанный пункт, но вы должны поставить border-radius стиль ниже версий с префиксами, специфичными для браузера. Это стандартный способ сделать что-то, так как это означает, что когда, например, Firefox начинает поддерживать border-radius, он выбирает стандартный стиль вместо -moz-border-radius. Если у вас есть версия -moz под ней, она будет продолжать использоваться, что может быть не тем, что вы хотите.

Answer 3

Как сказал Дэниел Ренер, вам нужно использовать свойства position: относительный и z-index для IE8. Если вы используете веб-сайт с подкаталогами для вызова CSS-файла, вам также понадобится использовать абсолютный путь в вашем CSS к PIE.htc - это было частью нашей проблемы.

Другая часть проблемы может заключаться в том, что ваш сервер не выводит файл PIE.htc как текстовый / x-компонент. Вы можете исправить это через IIS или Apache или вызвать скрипт PIE.php в своем CSS. Больше информации здесь: http://css3pie.com/documentation/known-issues/#content-type

Обе эти проблемы дошли до нас, и надеюсь, что они помогут вам.

Answer 4

У меня действительно была эта проблема по совершенно другой причине.

Граница-радиус не будет работать, если к тому же элементу применяется фильтр. Я применял border-radius к кнопке с линейным градиентом, применяемым в качестве фильтра. Как только я удалил фильтр, сработал border-radius.

Это задокументированное поведение, и градиенты должны применяться с использованием -pie-background:

http://css3pie.com/documentation/supported-css3-features/#gradients

Answer 5

На всякий случай, если кто-то пытается применить это к ячейкам таблицы, вам нужно применить position: relative к элементу table (а не к td или th, даже если эти элементы являются округлый).

Answer 6

behavior: url(PIE.htc);

Убедитесь, что между url и ( нет пробела, поскольку это останавливает его работу в IE8

.