Как сделать так, чтобы стилизация и функционирование элементов формы не нарушались во всех браузерах?

Question

Как сделать стилизацию и функционирование элементов формы одинаковыми во всех браузерах?

<form> </form>
<fieldset> </fieldset>
<legend> </legend>      
<button> </button>
<label> </label>
<input type="button" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select> </select>
<option> </option> 
<textarea> </textarea>
<optgroup> </optgroup>

Это все элементы формы, которые поддерживаются в XHTML и HTML.

Мой вопрос не о том, чтобы принять вертикальную или горизонтальную форму. Я спрашиваю, должны ли мы написать любой CSS по умолчанию для каждого элемента формы, чтобы сделать идентичные во всех браузерах. Неважно, где и как я их размещаю.

Это для элементов формы в сбросе Эрика Мейера:

fieldset, form, label, legend
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

Сброс YUI CSS также добавляет это:

input,textarea{ margin:0; padding:0; }

Как я нашел это исправление JavaScript: http://css -tricks.com / select-cuts-off-options-in-ie-fix /

Кто-нибудь знает какие-либо другие советы?

Answer 1

Делать вещи одинаковыми во всех браузерах не обязательно - главная цель - заставить вещи не ломаться в других браузерах. В разных браузерах есть определенные вещи, которые вы не сможете сделать «идентичными», несмотря ни на что, и некоторые элементы формы являются одной из таких вещей. Наихудшей из них является кнопка загрузки файла, для которой требуется слишком много настроек, чтобы она действительно настраивалась.

Сначала выберите только те браузеры, которые, по вашему мнению, будут у ваших пользователей, и сфокусируйтесь на них. Обычно это будет что-то вроде (Firefox, IE8 / IE7 / IE6, Chrome, Safari, Opera). Остальное вы можете полностью игнорировать. Если у вас есть существующий сайт, посмотрите в профиле браузера ваших посетителей Google Analytics и просто примите холодное решение о том, что вы хотите поддержать. В некоторых случаях вы можете даже полностью отключить IE6, что значительно облегчит вашу жизнь.

Затем, что я лично делаю, так это то, что я буду разрабатывать в Firefox, пытаться писать чистый простой код и, как только буду готов, начну смотреть на дизайн в разных браузерах (которые я установил на разных машинах, ноутбуках и т. Д.) и подправить вещи по мере необходимости. «Идентичный» никогда не был моей целью, просто «функциональный» и «красивый».

Надеюсь, это поможет.

Answer 2

Различный стиль операционных систем <button /> и <input type="submit" /> по-разному (т. Е. В Mac OSX кнопки отправки имеют округлые углы, цвета таблетки цвета морской волны. На компьютере с Windows кнопки имеют форму коробки с однопиксельной вставкой / outset border для них. CSS может вызвать появление кнопки в стиле Windows, но, вероятно, не сможет полностью эмулировать кнопку OSX, пока атрибут CSS3 border-image не станет полностью поддерживаемым. Если клиент Mac получит Информация стиля CSS для элемента <button />, он вернется к стилю, подобному DIV, так что вы можете сделать его похожим на кнопку в стиле Windows, но ваша ли это цель?

Кроме этого, может быть выполнен сброс CSS для полей, границ и шрифтов других полей ввода, но вам потребуется поддержка некоторых расширенных селекторов, поскольку <input type="submit" /> кнопки отправки будут совпадать с другим текстом <input /> полей (которые радикально отличаются от кнопок), поэтому вам понадобятся два оператора CSS, например:

input { border:solid 1px black; padding:0.25em; }
input[type="submit"] { border: outset 1px black; background-color:"#CCC"; padding:0.5em 1em; }

Браузеры, которые не поддерживают селекторы атрибутов (IE6!), Не будут корректно применять CSS.

Answer 3

Кросс-браузерная совместимость обычно не представляет проблемы для элементов формы. Это сводит с ума в обработке полей / отступов (или раньше) и с другими своеобразными элементами (например, старый тег Netscape "Layers"), но не совсем с формами. Есть конкретная проблема, с которой вы сталкиваетесь?

Answer 4

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

Это немного запутанно, но статья Эрика Мейера Формальная странность подчеркивает сложность.

Answer 5

Эрик Мейерс - хорошее место для начала. Я обнаружил, что добавление классов к определенным элементам (флажки и т. Д.) Мне очень помогает (проблема IE6, упомянутая выше). Лучшее, что вы можете сделать (или, по крайней мере, я когда-либо делал), это просто потратить немного времени, чтобы немного почитать, разработать кросс-браузерное решение, которым вы довольны и понятны, и использовать его снова и снова.