Как граница отображается в браузере

Метод рендеринга атрибута border в браузере уже давно обсуждается в группе QQ, и для решения этой проблемы я всегда использовал border:0 none; Конечно, есть и причины, по которым я это делаю. Эта причина будет упомянута в анализе ниже. Прежде чем анализировать свойства границ, необходимо объяснить несколько моментов:

1. Сяочжи, я не эксперт по анализу, я просто использую два инструмента Firebug и IE Developer для просмотра результатов рендеринга браузера в браузере FF и браузере IE;
2. Поскольку мы рассмотрели только результаты рендеринга браузеров FF и IE, это не означает, что все браузеры визуализируются одинаково.

Чтобы лучше сравнить стили границ, здесь мы выбираем элемент «кнопка», но используемые теги разные. Это элементы входного тега и элементы тега кнопки. Кстати, следует отметить одну вещь: в разных браузерах эти два элемента метки объединяет то, что они оба являются элементами управления системой. Стиль рамки и фон кнопки имеют абсолютную связь с темой системы.

Используя один и тот же код структуры XHTML, сравните браузер FF и браузер IE соответственно.

<час />
Кнопка

Демонстрационная анимация 1 Демонстрационная анимация 2

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

*Браузер FF: стили границ тегов ввода и тегов кнопок: border-width:3px; border-style:outset;
* Браузер IE: стиль границы метки ввода — border-width:2px; border-style:outset; стиль границы метки кнопки — border-width:2px;

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