Chrome портит макет сайта, FF и IE это хорошо - PullRequest
Новая
       32

Chrome портит макет сайта, FF и IE это хорошо

2 голосов
/ 15 марта 2010

Я работаю на сайте: http://www.bbp.nl/luuk-test/wac Он очень хорошо отображается на FF и IE. Я пошел, чтобы проверить это в Chrome, и он полностью испорчен. Каким-то образом Chrome отображает все элементы div друг под другом. Я действительно не знаю, где искать, так как это также хорошо проверяется в валидаторе W3C.

Тоже гуглил, но ничего не смог найти. Кто-нибудь знает ответ? Пожалуйста, помогите.

Ответы [ 6 ]

7 голосов
/ 15 марта 2010

Вы используете -moz-box-sizing в строке 20 таблицы стилей для своих элементов div, чтобы изменить расчетный размер блоков для браузеров Mozilla. Это не признается в Chrome.

См .: https://developer.mozilla.org/en/CSS/-moz-box-sizing

Вы также можете применить исправление для браузеров, использующих webkit: 

div {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box; 
}

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

2 голосов
/ 15 марта 2010

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

Вы открываете тег абзаца в строке 41, может, в этом проблема?

0 голосов
/ 23 февраля 2012

Chrome не поддерживает размеры блоков, что раздражает, потому что является частью CSS3.

Проблема возникает, если вы задаете маржу в 100% для DIV, а затем задаете для нее границу и маржу в 5px (например). Если для параметра box-size задано значение border-box, вы получите хороший DIV с отступом. Без определения размера блока div переполняется. Теперь вы можете обойти это, используя оболочку DIV, но это дополнительная разметка, или указав ширину в пикселях, но это не сработает, если вы не знаете ширину.

0 голосов
/ 15 марта 2010

Я бы полностью удалил эти свойства размера ящика и использовал бы более соответствующие свойства, такие как отступы, поля, ширина и высота для определения размера.

0 голосов
/ 15 марта 2010

В вашем CSS у вас есть: 

box-sizing: border-box;
-moz-box-sizing: border-box;

Чтобы заставить это работать в WebKit (Chrome / Safari), используйте -webkit-box-sizing

-webkit-box-sizing: border-box;
0 голосов
/ 15 марта 2010

Получите это дополнение для Firefox, оно сообщит вам обо всех ошибках, которые у вас есть на вашей странице ... включая открытый тег <-p->, как упомянул Machiel ...

https://addons.mozilla.org/en-US/firefox/addon/249

...