IE8 падает при стилизации ввода [type=submit] с помощью CSS3 PIE

Иногда страница работает, и вам нужно обновить страницу, чтобы увидеть ее сбой.

Вы можете увидеть живой пример здесь: http://rcnhca.org.uk/sites/first_steps/account/ (ie7 работает нормально, я не поддерживаю ie6)

Я пытаюсь стилизовать мою кнопку отправки со следующими значениями:

a.button, input.button {
    border: 2px solid #3A90A7;
    border-radius: 5px 5px 5px 5px;
    color: #202D32;
    display: block;
    float: left;
    height: 2.6em;
    line-height: 2.6em;
    margin: 0.667em 0.333em;
    padding: 0 1em;
    position: relative;
    text-decoration: none;
}

a.button:hover, input.button:hover{
    border: #202d32 solid 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
}

input[type=submit] {
    behavior: url(http://rcnhca.org.uk/sites/first_steps/PIE.htc);
    position: relative;
    -pie-poll:true;
}

a.button:hover, input.button:hover{
    -pie-box-shadow: none;
}

.button {
    -pie-background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
}

.button.active {
    -pie-background: linear-gradient(top, #b7b7b7 0%,#b7b7b7 8%,#e5e5e5 8%,#ffffff 100%);
}

Наконец, кнопка отправки во всей красе:

<input id="submitbtn" class="button omega" type="submit" value="Create your account" name="submit">

Кто-нибудь знает, что может быть причиной этой аварии? Я не получаю никакой информации, кроме сценария, который заставляет страницу работать медленно.

Источник

3 ответа

Решение

После еще одного тестирования я нашел ответ на эту проблему, дело не в том, что это была кнопка отправки, а в том, что это была какая-то кнопка формы, и я дал ее font-size,

Если я удалю font-size свойство на элементе тогда IE8 перестает падать, и я счастливый кролик.

Извините, так как я не включил ту часть CSS, которая имела размер шрифта (это большой файл, я его застеклил).

Источник

У меня была та же проблема, и я обнаружил, что моя кнопка не работает в IE8, потому что мне нужна была одна из границ none и это разбило мой CSS3PIE. Я изменился с border-left: none; в border-left-width: 0; и это сработало.

Источник

Я собираюсь проверить и протестировать, но сначала вам нужно узнать кое-что о CSS3PIE

CSS3PIE использует VML -язык разметки векторов, который позволяет рисовать графику с использованием Javascript, и включает функции для создания популярных CSS3-подобных эффектов, но с ограничениями.

Поскольку он использует Javascript для рисования графики, он использует много ресурсов браузера и вызывает его зависание и, в конечном итоге, сбой.

Я использовал CSS3PIE и раньше, но бросил его после прочтения этой впечатляющей аналогии Пола Айриша. Вы должны сосредоточиться на адаптации вашего дизайна, чтобы изящно ухудшить IE. Было бы лучше, если бы вы использовали что-то вроде Modernizr для проверки отсутствующих функций в браузере и добавления к нему определенных стилей.

Вернусь после тестирования

Обновить

Я тестировал в IE8, и да, он падает. Там нет ничего, что вы можете пойти, я думаю:(

Я бы порекомендовал вам запасной вариант для сплошного светло-серого цвета или использовать фоновое градиентное изображение.

Источник
Другие вопросы по тегам