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:

<div class="fieldRow alternate">
                <div class="label"><label id="title_label" for="title"> Title: </label></div>
                <div class="fieldWrapper required text">
                    <div class="cellValue"><input type="text" onchange="validateField(this)" name="title" id="title" value="Tax Free Savings Accounts" disabled=""></div>
                </div>
            </div>

и через javascript я добавляю rowMousedOver к fieldRow, когда он зависает.

Любая идея, почему это не работает? Я также пробовал использовать behavior: url(PIE.htc), но мне тоже не повезло.

Спасибо!

Ответы

Ответ 1

Запросы PIE.htc должны отвечать типом mime "text/x-component" - или IE не будет трогать поведение. Используемый вами PIE.php должен исправить это. Если вы не уверены, что это так, используйте функцию FireBug Net, чтобы проверить прямой запрос к файлу.

Также обратите внимание, что путь к PIE.htc относителен к HTML-странице - не относится к файлу css, который вы ожидаете. Поэтому рассмотрим вопрос о пути к абсолютному .htc. Здесь FireBug может помочь вам снова определить, есть ли у вас проблема 404.

Дополнительная информация на http://css3pie.com/documentation/known-issues/

Ответ 2

Попробуйте добавить position: relative в инструкцию css. У меня была эта проблема несколько раз, и она обычно разрешалась этим. Дополнительную информацию можно найти по адресу: http://css3pie.com/documentation/known-issues/

Ответ 3

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

position:relative;
z-index: 0;

как предложено здесь http://css3pie.com/forum/viewtopic.php?f=3&t=10

Ответ 4

Проблема может быть на вашем пути, в зависимости от того, где вы помещаете файл PIE.htc. Обратите внимание, что документация "Начало работы" (здесь) упоминает следующее:

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

Итак, behavior: url(PIE.htc); должен работать, если файл PIE.htc находится в той же папке, что и ваш html файл (по крайней мере, он работал у меня:-)).

Однако, не уверен, что вы хотите увидеть округленным... div, который будет затронут, похоже, не имеет видимых функций. Если вы хотите видеть div с закругленными углами, вы можете сделать видимость границы или фона, например добавление border: 1px solid black; или background-color: someColor; в класс поля.

Если вы хотите увидеть округленное поле ввода, вы можете объявить класс как .fieldRow input {...}

Ответ 5

Ответ Neophyte здесь (для использования условного комментария в разделе главы) помог мне, когда все остальное выглядело прекрасно/не изменилось (на простейшей тестовой странице, из IIS 7 с IE8)

http://www.webmasterworld.com/forum83/9144.htm

Надеюсь, что кто-то поможет

Ответ 6

Также стоит отметить - у меня была проблема, когда закругленные углы не работали в IE8, когда я установил цвет фона с правилом !important после него. Еще одна причина не использовать! Важно!

Ответ 7

Решение, которое работает для меня, выглядит следующим образом:

Путь к PIE.htc должен быть абсолютным, например. поведение: url (App_Themes/Default/PIE.htc)
Удостоверьтесь, что div, который вы установили в поведении, имеет стиль Position: Relative

Dan