Использование CSS3Pie htc для пограничного радиуса в IE8
Я использую 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 и абсолютный uri.
Демонстрации работают; просто не мой код!
Спасибо, Адам
Ответы
Ответ 1
Попробуйте добавить
position:relative;
z-index: 0;
как предложено здесь http://css3pie.com/forum/viewtopic.php?f=3&t=10
Этот вопрос похож на тот, который опубликован здесь:
CSS3 PIE - Предоставление поддержки пограничного радиуса IE не работает?
Ответ 2
URL-адрес PIE.htc, как указано в behavior: url(PIE.htc);
, является относительным URL-адресом, поэтому он, вероятно, ищет его в том же каталоге, что и таблица стилей, поэтому я бы предложил добавить косую черту, чтобы сделать его абсолютным URL-адресом. Но вы говорите, что уже сделали это.
Убедитесь, что указанный вами URL действительно загружает файл PIE.htc - т.е. помещает этот URL прямо в ваш browswer и видит, что выходит. Возможно, ваш веб-сервер не работает правильно по той или иной причине (не распознавая тип mime? И т.д.)
Вы прошли через известные проблемы на сайте PIE? Вы добавили position:relative;
в свой стиль? Может ли это быть известной проблемой z-index
?
Вы указываете, что он не работает в IE8. Вы пробовали его в IE7? IE6? Тот же результат? (это позволит исключить возможность того, что это проблема IE8)
Кстати - несвязанная точка, но вы должны поместить стиль border-radius
под версиями с префиксами, специфичными для браузера. Это стандартный способ сделать что-то, так как это означает, что, например, когда Firefox начинает поддерживать border-radius
, он поднимет стандартный стиль поверх -moz-border-radius
. Если у вас есть версия -moz
ниже, она будет продолжать использоваться, что может быть не так, как вы хотите.
Ответ 3
Как сказал Даниэль Ренер, вам нужно использовать положение: относительные и z-индексные свойства для IE8. Если вы используете веб-сайт с подкаталогами для вызова файла CSS, вам также нужно будет использовать абсолютный путь в вашем CSS для PIE.htc - это была одна из наших проблем.
Другая часть проблемы может заключаться в том, что ваш сервер не выводит файл PIE.htc в виде текста/x-компонента. Вы можете исправить это через IIS или Apache или вызвать PIE.php script в своем CSS. Подробнее здесь: http://css3pie.com/documentation/known-issues/#content-type
Оба эти вопроса получили нас, и надеюсь, что они помогут вам.
Ответ 4
У меня действительно была эта проблема по совершенно другой причине.
Пограничный радиус не будет работать, если фильтр применяется к одному и тому же элементу. Я применял граничный радиус к кнопке с линейным градиентом, применяемым в качестве фильтра. Как только я удалил фильтр, радиус границы работал.
Это документированное поведение, и градиенты должны применяться с помощью -pie-background
:
http://css3pie.com/documentation/supported-css3-features/#gradients
Ответ 5
behavior: url(PIE.htc);
Убедитесь, что между url
и (
нет пробела, так как это останавливает его от работы вообще в IE8
Ответ 6
На всякий случай кто-то пытается применить это к ячейкам таблицы, вам нужно применить position: relative
к элементу table
(а не к td
или th
, хотя это те элементы, которые являются округленный).