Метод рендеринга атрибута border в браузере уже давно обсуждается в группе QQ, и для решения этой проблемы я всегда использовал border:0 none; Конечно, есть и причины, по которым я это делаю. Эта причина будет упомянута в анализе ниже. Прежде чем анализировать свойства границ, необходимо объяснить несколько моментов:
Чтобы лучше сравнить стили границ, здесь мы выбираем элемент «кнопка», но используемые теги разные. Это элементы входного тега и элементы тега кнопки. Кстати, следует отметить одну вещь: в разных браузерах эти два элемента метки объединяет то, что они оба являются элементами управления системой. Стиль рамки и фон кнопки имеют абсолютную связь с темой системы.
Используя один и тот же код структуры XHTML, сравните браузер FF и браузер IE соответственно.
<input type="button" value="Button" />
<час />
<button>Кнопка</button>
Демонстрационная анимация 1 Демонстрационная анимация 2
Благодаря влиянию стиля по умолчанию текущей системной темы мы обнаружили, что браузер IE уже имеет небольшую разницу в синтаксическом анализе двух элементов тега, кнопки и ввода, но поскольку страница, видимая в текущей системной теме, обеспокоены, эффект производительности почти такой же. Студенты, которые заинтересованы в этом вопросе, могут экспериментировать самостоятельно. В результатах атрибутов, показанных в столбце выше, без какого-либо определения стиля CSS, мы получаем следующий результат:
*Браузер FF: стили границ тегов ввода и тегов кнопок: border-width:3px; border-style:outset;
* Браузер IE: стиль границы метки ввода — border-width:2px; border-style:outset; стиль границы метки кнопки — border-width:2px;
Используя эти данные, давайте посмотрим, каким будет результат, когда мы определим стиль для атрибута границы.