CSS3 PIE - не работает поддержка IE пограничного радиуса?
Я пытаюсь сделать закругленные углы в IE с прикрепленным поведением CSS3 PIE .
Вот мой CSS:
.fieldRow {
clear:both;
padding: 0;
margin: 0;
overflow: hidden;
line-height:17px;
}
.alternate, .rowMousedOver {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(PIE.php);
position: relative;
}
.rowMousedOver{
background-color: #E2E66D !important;
}
.alternate {
background-color: #FCFEE8;
}
, а вот пример HTML:
и с помощью javascript я добавляю rowMousedOver в поле fieldRow , когда оно наведено.
Есть идеи, почему это не работает? Я также пытался использовать поведение : url (PIE.htc) , но мне тоже не повезло.
Спасибо!
3 ответа
Запросы PIE.htc должны отвечать с mime-типом "text/x-component" - или IE не будет реагировать на такое поведение. Используемый вами PIE.php должен исправить это. Если вы не уверены, так ли это, используйте функцию FireBug's Net для проверки прямого запроса к файлу.
Также обратите внимание, что путь к PIE.htc указан относительно HTML-страницы, а не относительно css-файла, как можно было бы ожидать. Поэтому подумайте о том, чтобы сделать путь к .htc абсолютным. Здесь FireBug снова может помочь вам определить, есть ли у вас проблема 404.
More info at http://css3pie.com/documentation/known-issues/
Попробуйте добавить position: relative в свой оператор css. У меня была эта проблема пару раз, и обычно она решалась этим. Дополнительную информацию можно найти по адресу: http://css3pie.com/documentation/known-issues/
Проблема может быть в вашем пути, в зависимости от того, куда вы поместили файл PIE.htc. Обратите внимание, что в документации Pie «Начало работы» ( здесь ) упоминается следующее:
... вам нужно будет изменить путь, чтобы он соответствовал тому месту, куда вы загрузили PIE.htc на шаге 2. Примечание. : этот путь относится к просматриваемому файлу HTML, а не к файлу CSS, из которого он вызывается.
Итак, поведение : url (PIE.htc); должно работать, если файл PIE.htc находится в той же папке, что и ваш html-файл (по крайней мере, у меня это сработало :-)).
Однако я не уверен, что вы хотите округлить ... div, который может быть затронут, похоже, не имеет каких-либо видимых функций. Если вы хотите видеть div с закругленными углами, вы можете сделать границу или фон видимыми, например добавив border: 1px solid black; или background-color: someColor; в класс fieldrow.
Если вы хотите, чтобы поле ввода округлялось, вы можете объявить класс как .fieldRow input {...}