Одинаковый код выглядит по разному в FireFox и IE?

Question

[PolzuizYami]

spoiler

spoiler

почему?

Comments

[Евгений Петров]

Выложите код на jsfiddle.net

[PolzuizYami]

Евгений Петров: jsfiddle.net/ar0dvj9m

Answer 1

[Андрей Мохов]

используйте box-sizing

Comments

[PolzuizYami]

ознакомлюсь, но зачем эти костыли? Вот делаю я задания знакомлюсь с css и тут такое, почему так? =/ Тупо браузер не правильно отображает.

[Андрей Мохов]

PolzuizYami: один решили что параметры width включают бордер (Microsoft), другие так не решили, чтобы не было холивара добавили новый параметр, который скажет считать или нет бордер частью width/height

[Евгений Петров]

Андрей Мохов: Если не указывать box-sizing, все браузеры до единого одинаково считают размеры.
Мы же не будем обсуждать Quirks Mode?)

[Андрей Мохов]

Евгений Петров: скрины посмотрите, не видно, что ширина кругов разная?

[Евгений Петров]

Андрей Мохов: Видно. Без примера кода нельзя точно сказать, что к чему.
Но вы же говорите про то, что это потому, что браузеры размеры по-разному считают?

[PolzuizYami]

jsfiddle.net/ar0dvj9m
трабла не в ширине кругов, а в том что пунктир не отображается в Лисе, если пойграть с border-radius то при значение 46% и меньше, начинает появляться пунктир, но и круг уже не круг ) ширину кругов закоментил .

[Евгений Петров]

PolzuizYami: Есть такой баг, да https://bugzilla.mozilla.org/show_bug.cgi?id=382721

Answer 2

[SimBioT19]

Согласитесь, IE и Firefox это не одно и тоже.

Comments

[PolzuizYami]

получается Ослик норм браузер который правильно отображает, а Лиса нет?
Ибо в задание четко было задано сделать пунктирные границы, в Лисе они не отображались, втф?

[Денис Инешин]

PolzuizYami: последний ослик вполне себе почти норм, и некоторые вещи очень красиво отрисовывает.

[PolzuizYami]

Денис Инешин: и какой тогда браузер использовать начинающему верстальщику, что бы избежать конфузов?

[Денис Инешин]

PolzuizYami: в смысле какой браузер? Все доступные браузеры. Обычно этот список свой у каждой компании или у каждого клиента. Обычно имеется в виду, какие версии IE поддерживаются. Скажем у нас в компании это IE 9+, на старой работе было IE8+ и задача сделать максимально похоже везде. В этом то и заключается работа грамотного верстальщика. Смотреть во всех браузерах и делать одинаково.

[Евгений Петров]

Денис Инешин: Последний, это Edge?

[Денис Инешин]

Евгений Петров: Edge уже не совсем IE)

[Евгений Петров]

Денис Инешин: Я бы сказал, что теперь Edge — немного браузер и чутка гитарист:)
Но IE11 далёк от восхваления... Наткнулся на его косяк с flex и min-height — стало грустно. Очень.

[Денис Инешин]

Евгений Петров: конечно IE11 не фонтан, но кое-что в нем сделано очень хорошо, та же работа с бордерами просто очень неплоха. Сравните вот: jsfiddle.net/IonDen/ydxkupyy/1 в ИЕ отлично, в хроме уже хуже, а уж в ФФ то вообще ад.

[Евгений Петров]

Денис Инешин: Ну таких тем можно много найти:) У каждого браузера есть слабые места.
Но вот тот косяк с flex не даёт грамотно построить каркас страницы, а это куда как хуже рамочек.

Мне кажется, уже через лет 20 первые верстальщики будут внукам рассказывать:

— Были времена, когда я верстал таблицами под IE5, и вкладывал по лишнему блоку из-за косяка с шириной флоата... Да... И ещё он PNG с альфа-каналом не поддерживал...
— Как, дедушка, даже без анимации?
— Да уж какая там анимация... Даже фиксированного позиционирования не было, вот как было трудно.
— И даже флекса не было?
— Какой уж там флекс, говорю же вам — даже цвет полупрозрачный не задать.
— Страшно-то как тебе было, наверное, дед?
— Нет:) Не очень — уж очень он рамочки красивые рисовал:)

[Денис Инешин]

Евгений Петров: хахаха)

[PolzuizYami]

Денис Инешин: Это понятно, что надо что бы везде одинаково еще и на мобилках чтоб ок , эталонный то какой, а то вот я уже столкнулся, что делая задание и прописывая пунктирную границу кругу, эта самая граница стала сплошной линией.

[Денис Инешин]

PolzuizYami: эталон - гугл хром.

[Евгений Петров]

PolzuizYami: Никому не надо, чтобы было одинаково. Открою секрет — пользователи сайт смотрят в одном браузере. Им и в голову не придёт заниматься глупостью — сравнивать вид с видом в другом браузере.

Важно, чтобы сохранялись пропорции, внешний вид, не было глупых искажений. Человек может никогда не узнать, что там была пунктирная рамка и ничего от этого не потерять. А насчёт эталона... Chrome в последнее время начал сильно косячить. Проверять нужно во всех последних версиях.