Несмотря на, казалось бы, потрясающую тему, эту статью можно назвать развлечением для людей с болями в животе (таких как я~)~ Обычно у разработчиков есть свой способ расслабиться. Это возникло из-за вопроса о границах, заданного кем-то на форуме xd, поэтому я решил это выяснить. Написание статьи не заняло много времени, но подготовка фотографий заняла много времени. В этой статье давайте посмотрим, как каждый браузер понимает границы.
В число браузеров, участвующих в этом тесте, входят практически все браузеры под Windows: ie6, ie7, ie8, ie9preview, chrome, firefox, safari, Opera, seamonkey. Каждая версия является последней версией, загруженной из Интернета. А поскольку в этом тесте производительность IE678 была стабильной, а firefox и seamonkey были кумовством, поэтому их объединили в IE8 и firefox. На рисунке ниже показан скриншот этого браузера:
.jpg)
Вышеупомянутый порядок является преднамеренным. Причины будут показаны в тесте ниже, в этом же порядке расположены и скриншоты.
Сначала посмотрите на изображение ниже. DIV 20X20 отображается в шести браузерах с границей сверху: 2 пикселя, а остальные 1 пиксель. Кажется, нет никакой разницы. Это потому, что тонкость в 1 пиксель мешает нам обратить внимание. (На самом деле, нам не нужно беспокоиться обо всей этой проблеме~)
.jpg)
Сначала упростите задачу, одна сторона — 2 пикселя, три стороны — 1 пиксель, и увеличьте результат в 5 раз. Мы ясно видим эту разницу — Opera и Safari противоположны, IE8 не хватает рук и ног, а следующие три парня соответствуют ~ здесь. Следует отметить, что второй ряд из 3 имеет постепенный эффект на пересечении.
.gif)
Возможно, нам следует сделать этот эффект более заметным. Когда только одна сторона выделена жирным шрифтом (10 пикселей), особенности IE8 ясно проявляются. опера и сафари все еще относительны. Следующие три объединенных фронта постепенно становятся все более очевидными.
.gif)