2015-01-30 2 views
0

Я использую шаблон xeon Bootstrap (http://shapebootstrap.net/preview/?id=64). Firefox на Mac отображает поля, близкие к краю окна. Safari, используя окно с точно таким же размером, делает маржи намного шире.Тема Bootstrap имеет разные поля в разных браузерах

Два вопроса: Почему это? Как настроить Bootstrap более согласованно в браузерах?

Спасибо.

+0

Вы говорите о полях для элемента '.container'? – hungerstar

+0

Думаю, что да. Если вы посмотрите на ссылку, которую я предоставил с двумя Safari и Firefox, вы увидите гораздо больше полей или дополнений слева и справа в Safari. Эти элементы, кажется, находятся в контейнере div, но я не уверен, почему они будут выглядеть так по-другому. – Patrick

+1

У Firefox 35.0.1 и Safari 5.1.7 появляются одинаковые ширины страниц и боковые поля. – isherwood

ответ

1

Я не нахожусь на Mac, поэтому я не могу проверить, что я собираюсь предложить. Снимок экрана может быть полезен или ссылка на страницу. Здесь не так много, отсюда отсутствие ответов, но я сделаю это.

Я предполагаю, что проблема связана с браузерами, а не с Bootstrap или каким-то восприятием разницы, которое еще не полностью понято.

Что именно вы подразумеваете под «точно такого же размера»? Улучшены ли оба браузера? Вы вручную изменили размер, чтобы верх, правый, нижний и левый края выстроились в линию? Если это так, это не означает, что видовые экраны имеют одинаковый размер. Каждый браузер имеет собственный хром, элементы пользовательского интерфейса (полоса прокрутки) и т. Д., Которые могут быть разных размеров и влияют на размер окна просмотра.

Граница элемента .container установлена ​​в auto, которую браузер автоматически вычисляет для элементов заданной ширины, таких как .container. Класс Bootstrap .container определил ширину для различных размеров видовых экранов. Возможно, вы просматриваете свою страницу на ширине видового экрана, которая очень близка к точке останова, а правая полоса прокрутки (или что-то подобное) немного меньше/больше в одном браузере, чем в другом. Это, в свою очередь, может привести к тому, что страница будет отображаться с различной шириной, что приведет к появлению разных полей.

Например:

Бутстрап имеет точку останова в 992px.

  • Если ваша ширина экрана просмотра 995px в Firefox, Bootstrap будет отображать .container на 970px.
  • Если ширина вашего видового экрана 990px ​​в Safari, Bootstrap будет отображать .container на 750 пикселей.

Основываясь на этом предположении, что это проблема с точкой останова, я бы точно понял, какова ширина окна просмотра каждого браузера. Затем убедитесь, что вы установили их одинаковой ширины. Если вы получите тот же результат/проблему, вы узнаете, что это не точка останова.

Дополнительная информация была бы полезна.

Надеюсь, это указывает на то, что вы в правильном направлении.

+0

Спасибо, это, наверное, то, что происходит. Вот что я вижу в Safari: http://imgur.com/GwXvZto и вот что я вижу в Firefox: http://imgur.com/plifB52. Как вы можете видеть, в Firefox больше отображается содержимое. – Patrick

+0

Скорее всего, я вижу два столбца на скриншоте Safari под заголовком/слайдером и тремя столбцами на скриншоте Firefox. Если вы считаете, что это правильный ответ, пожалуйста, примите его как таковую. – hungerstar

Смежные вопросы