почему страница отображается по-другому в IE, чем Google Chrome? - PullRequest
0 голосов
/ 30 апреля 2011

Некоторые страницы ужасно отображаются в IE в целом, каков наилучший подход к решению этих проблем?

Ответы [ 3 ]

2 голосов
/ 01 мая 2011

Вы забыли добавить тип документа , поэтому ваша страница находится в режиме Причуды .

Добавьте это (тип документа HTML5) в самую первую строку:

<!DOCTYPE html>

и должно выглядеть лучше.

Хотя при изменении режима документа вручную (с помощью инструментов разработчика; нажмите F12) он все равно выглядит неправильно. Очевидно, есть другие проблемы со страницей.


Наиболее существенная проблема (после выхода из режима Quirks) заключается в следующем:

<body style="margin: 0; padding; 0;background-color: 4DA2CA;">

Internet Explorer не показывает цвет фона, потому что вы забыли # перед цветом. (И у вас есть padding; 0, с ; вместо :)

Это будет работать:

<body style="margin: 0; padding: 0; background-color: #4DA2CA">

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

Это было бы лучше:

<body>

с CSS в вашей таблице стилей :

body {
    margin: 0;
    padding: 0;
    background-color: #4DA2CA
}
0 голосов
/ 01 мая 2011

Вместо того, чтобы указывать причину различного способа рендеринга каждого элемента в IE, я настоятельно рекомендую не изобретать колесо каждый раз, когда вы создаете новый элемент страницы.

Даже в современных браузерах с жалобами на стандарты CSS может быть очень непредсказуемым, поэтому лучше использовать пуленепробиваемые фрагменты кода из надежных источников, таких как

CSS, руководство отсутствует1006 *

CSS, полное руководство

CSS Cookbook

Начните с рабочих блоков HTML / CSS и измените ихпо вашему вкусу и протестируйте кросс-браузер оттуда.Весь процесс будет намного менее расстраивающим.

0 голосов
/ 01 мая 2011

вы имеете в виду, что в IE элементы Div меньше. Это связано с тем, что в IE css border, поля включены в объявленную ширину. Так что, если вы задали ширину div в 100px и поле в 10px для обеих сторон, то в IE фактическая видимая ширина этого div будет 100-10-10 = 80px. Для решения проблемы вы можете использовать decleration потомков css. Рассматривая наш пример, если вы хотите показать эту ширину div 100px в обоих браузерах, сделайте следующее

    .mydiv{       /*This deceleration will be understood by all the browsers*/
     margin:10px;
     width:120px;       
    }

    html>body .mydiv{  /*This deceleration will not be understood by IE browsers so other will override the width*/
     width:100px;          
    }

Используя это, вы можете выровнять ширину ваших Div'ов как в IE, так и в других браузерах.

...