CSS ошибка в Safari, но не Chrome/Firefox

Question

https://gist.github.com/2354116

Если посмотреть выше страницу в Chrome/Firefox, то кажется, что все будет в порядке. Дивы внизу (два заголовка и социальные значки) завертываются в контейнерный div и центр без проблем.

Если это рассматривается в Safari, хотя тогда эти три дивы не сосредоточены на всех:/

Я не уверен, почему это .... может кто-нибудь помочь?

Answer 1

Примечание: должен был много чего придумать с вашим дизайном, чтобы изменить все, что не соответствует вашему оригинальному дизайну.

Во-первых, вы не имеете надлежащего содержания элементов страницы (контент, карусель, нижний колонтитул), у вас в настоящее время есть несколько контейнеров с шириной, которые стараются находиться рядом друг с другом, и это ломает ваш дизайн в нескольких местах.

Ваш контейнер содержание width:940px, ваш .wrapper ДИВ является width:750px, ваш .paramWrapper ДИВ является width:870px, ваш .carousel ДИВ является width:735px. Вы должны выбрать одну ширину и придерживаться ее и просто использовать маржу, чтобы размещать контент соответственно на своей странице. Я использовал 860px, который является шириной класса span11.

Далее вы изменяете таблицу стилей bootstrap.css непосредственно, это означает, что всякий раз, когда загрузка загружается, все ваши изменения будут потеряны, если вы перезапишете таблицу стилей начальной загрузки, чтобы создать другую таблицу стилей и поместить все ваши собственные стили там и просто загрузите «после» таблицу стилей загрузки в свой заголовок.

Теперь на ваш оригинальный вопрос, нижний .paraWrapper ДИВ не правильно укладки, потому что у вас есть ширина 870px набора в контейнере и элементы внутри не добавить до этой ширины:

span3 + span3 + span2 + margin = 640px

Таким образом, это была не проблема или ошибка, а только ваш макет.

Вот исправленная версия, которую я очень быстро выставил, поэтому вам нужно будет еще раз изменить элементы в соответствии с вашим дизайном: http://jsfiddle.net/rzSFa/3/, вот demo, как он выглядит.

Кстати, вы используете гибкую таблицу стилей загрузки для ничего, в настоящее время она не делает много в вашем случае, так почему бы ее использовать? Вы можете легко модифицировать несколько медиа-запросов, чтобы поддерживать мою фиксированную версию, но ваша не будет работать вообще, потому что вы объявляете все свои собственные классы с пользовательской шириной, поэтому нет смысла включать ее.