这是一个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的输出:
这是IE8输出:
问题出在哪里?
发布于 2010-08-20 21:28:49
如何修复此页面
让我们帮你一点忙吧。
使用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
to 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。
发布于 2010-08-20 20:44:03
问题是不是所有的浏览器都使用相同的渲染引擎或渲染规则。对于web开发人员来说,这是一个持续不断的痛苦来源,而且它似乎不会很快消失。
尽可能使用CSS,因为浏览器往往在严格的样式表规则下遵循得最好。除此之外,祝你好运,欢迎来到web dev :)
发布于 2010-08-20 21:21:38
要成为一个跨浏览器的人,你需要几个工具,很多经验,如果是IE,还需要很多运气。除了这里的其他答案之外,您还可以使用Yahoo CSS,它为您提供了一个共同的基础(所有浏览器都不具有相同的默认值):http://developer.yahoo.com/yui/reset/
https://stackoverflow.com/questions/3530902
复制相似问题