Селектор CSS IE8 выбирает, но не применяет стиль

http://www.dmhermitage.org/wtfborders.pngМне хочется убить себя.

У меня есть действительно простой CSS для стилизации моих объектов ввода:

    input, button
    {
        border: 1px solid #c66600;
        background-color: white;
        color: #7d212f;
        font-family: "Eras Light ITC", Tahoma, sans;
    }

Но мне не нравится уродливая рамка вокруг переключателей, поэтому я использую селектор, чтобы убрать границу:

input[type=radio] { border: none; }

Вы, вероятно, можете догадаться, в каких браузерах это работает, а в каком ОДНО это не работает. Что забавно, так это то, что когда я нажимаю F12, чтобы запустить отличные инструменты разработчика в IE8, это на самом деле говорит мне, что стиль переключателей был переопределен на «нет». ', как я и просил, но рамка остается на объектах переключателя.

Я пробовал различные семантические вещи, такие как установка ширины границы на 0 пикселей или цвет на что-то безумное, например, зеленый лайм, но он остается изначально назначенным цветом, который он получил из первого стиля.

И, наконец, я пробовал только стилизовать «текстовые» объекты, и в этом случае стиль ни к чему не применяется. Опять же, браузер утверждает, что выполняет выбор CSS, но визуально этого не происходит.

Мысли?

Кстати, это установка DotNetNuke со сгенерированным кодом, где я не могу явно указать стиль переключателей.

Спасибо, Дэн


css radio-button internet-explorer css-selectors internet-explorer-8
person Dan    schedule 16.04.2010    source источник
comment
У вас есть живой пример, на который мы могли бы взглянуть?   -  person Kyle    schedule 16.04.2010
comment
Живой пример (в разработке) находится здесь: dmhermitage.org/portal Проверьте переключатели рядом с полем поиска, чтобы понять, что я имею в виду.   -  person Dan    schedule 16.04.2010
comment
Я всегда думал, что эти переключатели были стандартами браузера, как теги заголовков. Интересно узнать, можно ли их изменить. У вас тоже есть этот набор: -webkit-appearance: radio может это не помогает?   -  person Kyle    schedule 16.04.2010
comment
Определенно похоже на ошибку, я получаю то же самое в IE8. Можете ли вы попробовать использовать класс вместо input[type=radio]?   -  person Pekka    schedule 16.04.2010

Ответы (6)


arrow_upward
2
arrow_downward

IE8 рендерится в необычном режиме, а не в стандартном, что всегда все портит в IE. Чтобы переключиться в стандартный режим, проще всего заменить тип документа в первой строке документа следующим образом:

<!DOCTYPE HTML>

Вы также можете посмотреть на вывод HTML. У вас есть диапазон с идентификатором dnn_dnnMENU_ctldnnMENU, который содержит десятки искусственных атрибутов, таких как BackColor, SysImgPath, MenuItemHeightи т. д. Это не будет иметь никакого эффекта в большинстве браузеров (возможно, IE интерпретирует их специально, я не знаю).

person DisgruntledGoat    schedule 16.04.2010
comment
он не только переключается на стандарты, он также переключается на html 5 - person Adam Kiss; 16.04.2010
comment
@Adam: Не в IE. И на самом деле нет никакой разницы в том, как другие браузеры обрабатывают стандарты HTML 5, за исключением поддержки еще пары элементов. - person DisgruntledGoat; 17.04.2010

arrow_upward
1
arrow_downward

проблема в том...

Будучи самым полезным из когда-либо существовавших, обратите внимание, что каким-то образом ваша страница отображается в режиме quirks, таким образом, каким-то испорченным способом, которым никто никогда не должен пользоваться.

решение [править]

из-за: http://dorward.me.uk/www/ie8/

установите тип документа html 4 на:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
person Adam Kiss    schedule 16.04.2010
comment
Гм... это добавляет HTML-комментарий, а не тип документа. - person DisgruntledGoat; 16.04.2010
comment
Большое спасибо, это исправило проблему с моим локальным ящиком (еще не загрузил). - person Dan; 16.04.2010

arrow_upward
0
arrow_downward

На всякий случай, вы пробовали с:

input[type='radio'] { border: none; }

Обратите внимание на добавление апострофа (или того, что вы называете ' на своем смешном языке: P)

Я просмотрел сайт, ваш CSS правильный, и я ничем не могу вам помочь. Удачи!

person Kaze no Koe    schedule 16.04.2010
comment
Пробовал и с апострофами. То же самое. Живой пример (в разработке) находится здесь: dmhermitage.org/portal Проверьте переключатели рядом с полем поиска, чтобы увидеть что я имею в виду. - person Dan; 16.04.2010

arrow_upward
0
arrow_downward

Вы можете удалить границу, установив для встроенного атрибута стиля на панели инструментов разработчика значение border: none;... Таким образом, по какой-то причине стиль не применяется к переключателю, хотя стиль отслеживается правильно. Похоже на какой-то баг.. Вы пробовали накрутить специфичность правила (оно уже должно быть выше входного, но просто попробовать)?

Например:

#page input[type=radio] {
   border: none;
}
person PatrikAkerstrand    schedule 16.04.2010

arrow_upward
0
arrow_downward

Это невозможно с CSS (насколько я знаю), но с помощью этого Javascript здесь это будет возможно для вас; Стили флажков и переключателей с помощью CSS и Javascript.

person Kyle    schedule 16.04.2010

arrow_upward
0
arrow_downward

Противный. Попробуйте указать белый цвет границы?

person graphicdivine    schedule 16.04.2010