Question

这是一个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

有什么问题？

Answer 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 s是没有意义的通用块级元素，h1到h6元素集（为了缺少更好的单词）告诉浏览器它们中包含的文本是标题。

CSS Box模型

请查看框模型和浮动在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。

Answer 2

您错过了第一页的标记<!DOCTYPE>。

例如：

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

如果你没有把它，IE会激活quirks mode，会发生很奇怪的事情。当浏览器激活怪异模式时，许多事情会发生变化，如box model。

注意：很多浏览器都有怪癖模式，不仅仅是IE（我知道firefox也有）。

有关quirks mode的更多信息。

doctypes。

列表

Answer 3

问题是并非所有浏览器都使用相同的渲染引擎或渲染规则。对于Web开发人员来说，这是一个不断的悲痛源，而且它似乎不会很快消失。

尽可能使用CSS，因为浏览器在严格的样式表规则下往往更符合要求。除此之外，祝你好运，欢迎来到网络开发：）

Answer 4

使用doctype：list 我会用的那一刻 - ＆gt; XHTML 1.0 严格，XHTML 1.1，HTML5（如果你不熟悉这个可能发生的问题
使用重置：eric meyers reset for xample是一个很好的
使用clearfix（并知道何时使用它），例如Jeff Starr的the new clearfix

使用这三件事，它是一个良好的开端，让您的网站在所有浏览器中看起来都一样。之后，您必须了解自定义浏览器错误，例如double margin bug等。

Answer 5

要跨浏览器，你需要几个工具，很多经验，而且，对于IE来说，运气很大。除了这里的其他答案，您可以使用Yahoo CSS，它为您提供了一个共同的基础（所有浏览器都没有相同的默认值）： http://developer.yahoo.com/yui/reset/

为什么不同浏览器以不同方式呈现相同的HTML？

5 个答案: