jquery - Why do different browsers render the same HTML differently?

Question

Welcome To Ask or Share your Answers For Others

jquery - Why do different browsers render the same HTML differently?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:43:17+0000

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.

Categories

jquery - Why do different browsers render the same HTML differently?

jquery - Why do different browsers render the same HTML differently?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

How to fix this page

Use a Doctype

To make everything center aligned

To create equal height columns

Use the correct terminology and better class name

Use semantically valid HTML

CSS Box Model

The Real Problem Here

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags