Почему разные браузеры отображают один и тот же HTML по-разному?

Это html-страница:

<html>
<head>
<title>
Frame Set
</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="frame.css" type="text/css" media="screen" />

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
    var winSize = $(window).width();
    var margin = (winSize-1000)/2;;
    $('#main').css({'margin-left':margin,'margin-right':margin});  
    }
)
$(function() {
  $(".frame").each(function() {
     var width = ($(this).find('.h').width()), 
         height = $(this).find('.l').height(),
         pad = $(this).find('.h').position().left,
         actWidth = width + 10,
         nHeight = height - (height * 2),
         rLeftMargin = actWidth - 1,
         bWidth = actWidth;

    $(this).find('.r').css({'margin-top':nHeight, 'margin-left':rLeftMargin, 'height':height});
    $(this).find('.h').css({'height':25});
    $(this).find('.b').css({'width':bWidth, 'margin-top':0});
  });
});
</script>
</head>
<body>
<div id="main" align="center" style="width:1000px; height:100%; text-align:left;">
    <div id="inner1" style="width:100%; height:20%; float:top; margin-bottom: 20px;">
        <div id="inner11">
            <div class="frame">
                <div class="h" style="width:100%">Header</div>
                <div class="l" style="height:93%"></div>
                <div class="r"></div>
                <div class="b"></div>
            </div>
        </div>
    </div>
    <div id="inner2" style="width:100%; height:60%;">
        <div id="inner21" style="width:69%; float:left; margin-left: 1px; margin-right: 1px;">
            <div class="frame">
                <div class="h" style="width:100%">Left Frame</div>
                <div class="l" style="height:93%"></div>
                <div class="r"></div>
                <div class="b"></div>
            </div>
        </div>
        <div id="inner22" style="width:29%; float:right; margin-left: 1px; margin-right: 1px;">
            <div class="frame">
                <div class="h" style="width:100%">Right Frame</div>
                <div class="l" style="height:93%"></div>
                <div class="r"></div>
                <div class="b"></div>
            </div>
        </div>
    </div>
    <div id="inner3" style="width:100%; height:20%; float:bottom; margin: 2px 2px 2px 2px;">
        <div id="inner23">
            <div class="frame">
                <div class="h" style="width:100%">Footer</div>
                <div class="l" style="height:93%"></div>
                <div class="r"></div>
                <div class="b"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Это вывод Mozilla:

Это вывод IE8:

В чем проблема?

Ответы

Ответ 1

Как исправить эту страницу

Позвольте немного помочь вам...

Использовать Doctype

См. ответ @Topera

Чтобы сделать выравнивание по центру

Пожалуйста, не используйте

var winSize = $(window).width();
var margin = (winSize-1000)/2;;
  $('#main').css({'margin-left':margin,'margin-right':margin});  
}

Вместо этого используйте свойство CSS margin: 0 auto. Как правило, всегда используйте CSS-решение вместо Javascript, где это возможно.

Чтобы создать столбцы с одинаковой высотой

См:
http://www.positioniseverything.net/articles/onetruelayout/equalheight
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Используйте правильную терминологию и лучшее имя класса

Чтобы избежать путаницы, пожалуйста, не обращайтесь к элементам без рамки в качестве кадров. Дополнительные сведения о кадрах см. В разделе http://reference.sitepoint.com/html/elements-frames-windows

Дайте своим классам значимые имена. Причиной этого является то же самое для любого другого языка - так что, когда вы вернетесь через три месяца позже, вы не будете царапать голову в классах с именами l, r и h.

Использовать семантически допустимый HTML

Атрибуты align и text-align официально устарели; см. вышеприведенное решение о выравнивании объектов по центру и свойства свойства CSS text-align.

HTML-элементы придают смысл содержимому, которое они обернуты. Заголовки, которые у вас есть для каждого "фрейма", должны быть помечены заголовками <h2> или <h3> вместо этого, а div - это общие элементы уровня блока без значение, h1 to h6 набор элементов (из-за отсутствия лучшего слова) сообщает браузеру, что текст, содержащийся в них, является заголовками.

CSS Box Model

Пожалуйста, взгляните на то, как модель коробки и поплавки работают в CSS. bottom и top являются недопустимыми значениями для свойства CSS float.

http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/#cssboxmodels
http://reference.sitepoint.com/css/boxmodel
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Реальная проблема здесь

не работает с браузерами. IE8 на удивление ошибочно ведет себя намного меньше, чем его предшественники. Попробуйте лучше писать HTML и CSS.

Ответ 2

Вы пропустили тег <!DOCTYPE> в первой строке страницы.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Если вы этого не сделаете, IE активирует quirks mode, и произойдет очень странное. Когда браузер активирует режим quirks, многие вещи меняются, как box model.

ПРИМЕЧАНИЕ. У многих браузеров есть режим quirks, а не только IE (я знаю, что Firefox тоже).

Подробнее о режиме quirks.

Список doctypes.

Ответ 3

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

Используйте CSS везде, где это возможно, поскольку браузеры, как правило, лучше всего подходят, когда находятся под строгими правилами стилей. Помимо этого, удачи и добро пожаловать в веб-разработчик:)

Ответ 4

используйте doctype: список на момент, который я использовал бы → XHTML 1.0 Строгий, XHTML 1.1, HTML5 (если нет вы не знакомы с проблемы, которые могут возникнуть
используйте reset: eric meyers reset для xample является хорошим
используйте clearfix (и узнайте, когда его использовать), например новое clearfix от Джеффа Старра

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

Ответ 5

Чтобы быть кросс-браузером, вам нужно несколько инструментов, большой опыт и, в случае IE, много удачи. В дополнение к другим ответам здесь вы можете использовать Yahoo CSS, который дает вам общую базу (все браузеры не имеют одинаковых значений по умолчанию): http://developer.yahoo.com/yui/reset/