CSS3 PIE - Предоставление поддержки IE border-radius не работает?

Question

Я пытаюсь сделать закругленные углы в 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), но мне тоже не повезло.

Спасибо!

Answer 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/

Answer 2

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

Answer 3

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

position:relative;
z-index: 0;

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

Answer 4

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

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

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

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

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

Answer 5

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

Answer 6

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

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

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

Answer 7

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

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

Dan