Почему этот стиль "width: auto" работает как встроенный стиль в обоих браузерах, но ломается при перемещении во внешнюю таблицу стилей только в IE?
У меня есть элемент INPUT, который по умолчанию имеет значение «width: 100%». Это заставляет его перемещать другие элементы рядом с собой на следующую строку. Чтобы временно исправить это, я добавил к элементу встроенный атрибут стиля:
<input style = "width: auto" ...>
который работал нормально. Теперь я возвращаюсь, чтобы очистить временные исправления, и перемещаю все стили из атрибутов стиля во внешние таблицы стилей. Когда я перемещаю этот конкретный стиль «width: auto» в таблицу стилей, он по-прежнему выглядит нормально в Firefox, но в IE он игнорирует его и снова принимает значение «width: 100%», которое снова выдувает элементы рядом с ним.
Панель инструментов веб-разработчика IE не сообщает мне, откуда берутся стили, поэтому трудно диагностировать, что происходит. Я предполагаю, что в IE есть что-то еще, имеющее приоритет, но я не знаю, что это может быть.
Обновлено: клянусь, я попытался щелкнуть правой кнопкой мыши на панели разработчика IE, но я думаю, что нет - когда я делаю «стиль трассировки» на «ширине: 100%» в IE, я получаю всплывающее окно, в котором просто говорится: «1. Нет совпадений», однако в Firefox он показал, что 100% просачивалось из селектора вышеупомянутого элемента, который был чем-то вроде «#outer foo bar INPUT», который также охватил этот INPUT. Я ошибочно предположил, что "#id" непосредственно в элементе INPUT будет иметь более высокую специфичность, чем "#id foo bar INPUT", но я предполагаю, что браузеры не согласны с этим. В любом случае, это дошло до корня моей проблемы, поэтому спасибо за комментарии. Хотелось бы, чтобы был способ превратить комментарий в ответ ...
На панели инструментов IE есть способ узнать, откуда взялось определенное значение свойства. Если вы щелкните правой кнопкой мыши свойство, вы можете выбрать «Стиль трассировки», и это даст вам более или менее представление о том, откуда берется конкретное значение. Однако он далеко не так хорош, как Firebug.
Ответы 1
Вы абсолютно уверены, что ваши правила не противоречат друг другу или расположены в неправильном порядке (и имеют одинаковый приоритет), что исключает друг друга?
Помимо предложения Джона Шихана, вы можете попробовать применить идентификатор к входному элементу, а затем создать правило в своей таблице стилей, которое добавляет width: auto к этому элементу с помощью селектора идентификатора.
Таким образом, правило будет иметь более высокий приоритет и с большей вероятностью будет применено. Это даст вам лучшее представление о том, в чем проблема.
Обновлено: с учетом ваших обновлений правило, которое вызывало ваше горе, работает так, как должно (с точки зрения специфики). Если вы хотите конкретно адресовать свой элемент, вы все равно можете написать правило со спецификой сильнее примерно так:
#outer foo bar INPUT#id {
width:auto;
}
Если вы обнаружите, что пишете CSS таким образом, скорее всего, вы сделали что-то не так и, возможно, захотите переосмыслить, как вы структурировали свои правила CSS.
Ширина: авто; до или после width: 100%; в файле? Вы не знаете, где в CSS width: 100%; исходит от? Firebug должен сообщить вам, где это находится, даже если Firefox отображает его правильно.