Почему этот стиль "width: auto" работает как встроенный стиль в обоих браузерах, но прерывается при перемещении во внешнюю таблицу стилей только в IE?

Question

У меня есть элемент INPUT, который по умолчанию равен "width: 100%". Это заставляет его толкать другие элементы рядом с ним на следующую строку. Чтобы исправить это временно, я добавил атрибут элемента встроенного стиля в элемент, подобный этому:

<input style="width: auto" ...>

, который работал просто отлично. Теперь я вернусь, чтобы очистить временные исправления и перенесу все стили из атрибутов стилей во внешние таблицы стилей. Когда я перемещаю этот конкретный стиль "width: auto" в таблицу стилей, он все равно отлично выглядит в Firefox, но в IE он игнорирует его и снова принимает значение по умолчанию "width: 100%", что снова выдувает элементы рядом с ним.

Панель инструментов веб-разработчика IE не сообщает мне, откуда берутся стили, поэтому сложно определить, что происходит. Я думаю, что в IE есть что-то еще, но я не знаю, что это может быть.

Редактировать: я клянусь, я пытался щелкнуть правой кнопкой мыши на панели разработчика IE, но я думаю, что нет - когда я делаю "стиль трассировки" на "width: 100%" в IE, я получаю всплывающее окно, которое просто говорит "1. Нет match ", однако в Firefox это показало, что 100% проходило через селектор на вышеуказанном элементе, который был чем-то вроде" #outer foo bar INPUT ", который также охватывал этот INPUT. Я ошибочно предположил, что «#id» непосредственно в элементе INPUT будет иметь более высокую специфичность, чем «#id foo bar INPUT», но я предполагаю, что браузеры не согласны с этим. В любом случае, это дошло до корня моей проблемы, так что спасибо за комментарии. Хотелось бы, чтобы был способ продвинуть комментарий к ответу ...

Answer 1

Вы абсолютно уверены, что ваши правила не противоречат друг другу или находятся в неправильном порядке (и имеют одинаковый приоритет), таким образом взаимно уничтожая друг друга?

Одна вещь, которую вы можете попробовать, кроме предложения Джона Шихана, - применить идентификатор к элементу ввода, а затем создать правило в вашей таблице стилей, которое добавляет width: auto к этому элементу с помощью селектора идентификаторов.

Таким образом, правило будет иметь более высокий приоритет и с большей вероятностью будет применяться. Это даст вам лучшее представление о том, где проблема.

РЕДАКТИРОВАТЬ: Учитывая ваши обновления, правило, которое вызвало ваше горе, работает как положено (насколько это касается специфичности). Если вы хотите обратиться к своему элементу конкретно, вы все равно можете написать правило с более сильной специфичностью с чем-то вроде этого:

#outer foo bar INPUT#id {
  width:auto;
}

Однако если вы пишете CSS таким образом, скорее всего, вы сделали что-то не так и, возможно, захотите переосмыслить, как вы структурировали свои правила CSS.