Использование 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.

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

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

Ответ 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, хотя это те элементы, которые являются округленный).