Why do different browsers render the same HTML differently?

This is an html page :

<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>

This is Mozilla output :

alt text

This is IE8 output :

alt text

What is the problem ?

17
задан 25 February 2011 в 06:51
поделиться

4 ответа

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

Давайте здесь немного поможем ...

Используйте 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 и ч .

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

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

Элементы HTML придают смысл содержимому, в которое они заключены.Заголовки, которые у вас есть для каждого «кадра», должны быть размечены заголовками

или

, тогда как div являются общими элементами уровня блока. не имея смысла, набор элементов с 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.

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

  2. используйте сброс: eric meyers reset для xample - хороший вариант

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

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

5
ответ дан 30 November 2019 в 09:56
поделиться

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

1
ответ дан 30 November 2019 в 09:56
поделиться

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

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

17
ответ дан 30 November 2019 в 09:56
поделиться
Другие вопросы по тегам:

Похожие вопросы: