Ширина wiedness CSS в Chrome и Firefox с Pure CSS

Question

Для начала я совершенно новый для CSS, поэтому надеюсь, что я не сделал ничего ужасно глупого.

В принципе, у меня есть дизайн, который я делаю, построенный с использованием Pure, и ширина в Google Chrome растет, а работает в Firefox.

Вот ссылка на то, что я сделал: http://egf.me/Rushd/rushdtest.html и скриншоты:

• Firefox: http://i.imgur.com/mn3GIbT.png
• Chrome: http://i.imgur.com/44jLC6J.png

Если вы посмотрите на исходный код страницы, я на самом деле ничего не сделали в моем собственном CSS, чтобы что-то изменить (я просто прокомментировал это как проверку, чтобы убедиться), поэтому я предполагаю, что я как-то использую Pure неправильно, так как их собственный сайт отлично отображает Chrome.

Кроме того, проверка элементов с помощью инструментов разработчика Chrome показывает, что элементы div, которые должны быть рядом друг с другом, имеют ширину, которая меньше, чем у родителя. И ничего там, кажется, нет буферов или дополнений. Кроме того, если я вручную уменьшу ширину, чтобы быть очень немного меньше, Chrome, похоже, волшебным образом исправит все.

Answer 1

Проблема в том, что между вашими дочерними divs создается пространство. Проблема не является ни маржей, ни дополнением - на самом деле это вызвано пробелом между вашими тегами div в HTML-коде!

Поместите метки непосредственно примыкающие к Афоризм без каких-либо пробелов и ваша проблема будет решена;)

Example code

<!--whitespace in HTML = renders as a space between the divs--> 
    <div></div> 
<div></div> 
<!--no whitespace in HTML = renders edge to edge--> 
<div></div><div><div>