При использовании процентов (%) для определения размеров моих элементов Chrome, очевидно, предпочитает математически составлять свои собственные правила.
Насколько я понимаю, когда вы добавляете 80 + 20, вы получаете 100; право? Ладно, хорошо. Chrome это тоже понимает. Но что, если мы напишем одно и то же уравнение по-разному? Например: (78 + 1 + 1) + (18 + 1 + 1) Что вы получили? Было ли это 100? Да, я тоже.
Итак, кто-то может , пожалуйста, , скажите мне, почему Chrome считает иначе?
Возьмите два элемента и поместите их рядом друг с другом. Затем примените width:20% к одному элементу и width:80% к оставшемуся элементу. Вы заметите, что 100% страницы (или контейнера) занято обоими элементами рядом. Тем не менее, давайте будем простыми и добавим отступ в 1% с обеих сторон каждого элемента. Это означает, что один элемент будет иметь width:18%; padding:1%, а другой элемент будет иметь width:78%; padding:1%. Теоретически, это должно иметь тот же результат: 100% страницы (или контейнера) заняты обоими элементами рядом. Но в Chrome это просто не так. Это терпит неудачу.
Доказательство в пудинге: jsfiddle (вы заметите небольшие различия, если вы используете Chrome).
Это разочаровывает, потому что, когда все складывается, особенно с большим объемом элементов, используемых рядом, это может действительно вывести макет из строя. Я знаю, что, создавая дочерние элементы, чтобы заботиться о отступах и / или полях, мы можем избежать ситуации, но это может привести к использованию разметки, которая в противном случае была бы избыточной.
Мне просто нужно объяснить, почему Chrome ведет себя таким образом (возможно, это вообще Webkit, я еще не тестировал его).