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">
$(docum开发者_运维知识库ent).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 :

Why do different browsers render the same HTML differently?

This is IE8 output :

Why do different browsers render the same HTML differently?

What is the problem ?

How to fix this page

Let's help you out here a bit...

Use a Doctype

See @Topera's answer

To make everything center aligned

Please do not use

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

Instead, use the CSS property margin: 0 auto. As a rule of thumb, always use a CSS solution instead of a Javascript where possible.

To create equal height columns

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

Use the correct terminology and better class name

To avoid confusion, please do not refer to non-frame elements as frames. For more about what frames are, see: http://reference.sitepoint.com/html/elements-frames-windows

Give your classes meaningful names. The reason for this is the same for any other language - so that when you come back later three month later you won't be scratching your head at classes named l, r and h.

Use semantically valid HTML

The align and text-align attributes are officially deprecated; please see the above solution on making things center aligned and the CSS property text-align property instead.

HTML elements give meaning to the content they are wrapped in. The headers you have for each 'frame' should be marked up with <h2> or <h3> headings instead - while divs are generic block level elements with no meaning, the h1 to h6 set of elements (for want of a better word) tells the browser that the text contained in them are headings.

CSS Box Model

Please have a look at how the box model and floats work in CSS. bottom and top are not valid values for the CSS float property.

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/

The Real Problem Here

is not with the browsers. IE8 surprisingly misbehaves much less than its predecessors. Try writing better HTML and CSS instead.

You miss the tag <!DOCTYPE>, in the first line of page.

Ex:

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

If you don't put it, IE will activate quirks mode, and very strange things will happen. When a browser activate quirks mode, many things change, as box model.

NOTE: many browsers has quirks mode, not only IE (I know that firefox has too).

More about quirks mode.

List of doctypes.

The problem is that not all browsers use the same rendering engine or rendering rules. This is a constant source of grief for web developers, and it's not something that seems to be going away anytime soon.

Make use of CSS whenever possible, as browsers tend to comply best when under strict stylesheet rules. Beyond that, good luck and welcome to web dev :)

use a doctype: list at the moment i would use -> XHTML 1.0 Strict, XHTML 1.1, HTML5 (do not if you are not familier with the problems that could occur
use a reset: eric meyers reset for xample is a good one
use a clearfix (and know when to use it) for example the new clearfix by Jeff Starr

using this three things, its a good start to let your website look the same in all browsers. after that you must learn about custom browser bugs, like double margin bug and so on.

To be cross browser you need several tools, a lot of experience, and, in case of IE, a lot of luck. In addition to the other answers here, you can use Yahoo CSS which give you a common base (all browsers don't have the same default values): http://developer.yahoo.com/yui/reset/