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

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

17 голосов
/ 20 августа 2010

Это 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:

alt text

Это вывод IE8:

alt text

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

Ответы [ 5 ]

112 голосов
/ 20 августа 2010

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

Давайте немного поможем вам ...

Используйте 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 s являются универсальным блокомэлементы уровня без значения, набор элементов от h1 до h6 (если нет лучшего слова) сообщает браузеру, что содержащийся в них текст является заголовком.

Блочная модель CSS

Пожалуйста, посмотрите, как работают блочная модель и плавающие элементы в 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.

23 голосов
/ 20 августа 2010

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

Ex: 

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

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

ПРИМЕЧАНИЕ: многие браузеры имеют режим причуд, не только IE (я знаю, что Firefox тоже).

Подробнее о режиме причуд .

Список типов документов .

17 голосов
/ 20 августа 2010

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

Используйте CSS всякий раз, когда это возможно, поскольку браузеры, как правило, лучше всего соответствуют строгим правилам таблицы стилей. Кроме того, удачи и добро пожаловать в web dev :) 1003 *

5 голосов
/ 20 августа 2010

  1. используйте doctype: list на данный момент я бы использовал -> XHTML 1.0 Strict, XHTML 1.1, HTML5 (не делайте, если вы не знакомы с проблемами, которые могут возникнуть

  2. использовать сброс: сброс Эрика Мейерса для примера xample *

  3. использовать сброс (и знать, когдаиспользовать его) например новый clearfix Джеффа Старра

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

1 голос
/ 20 августа 2010

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

...