jquery之为什么不同的浏览器以不同的方式呈现相同的 HTML
这是一个 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 的输出:
问题是什么？
请您参考如下方法:
如何修复此页面
让我们来帮您一下...
使用文档类型
查看@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 的类(class)上挠头了。 , r和 h .
使用语义上有效的 HTML
align和 text-align属性已正式弃用；请参阅上面关于使事物居中对齐和 CSS 属性的解决方案 text-align属性(property)代替。
HTML 元素赋予它们所包含的内容以意义。每个“框架”的标题应标记为 <h2>。或 <h3>标题代替 - 而 div s 是没有意义的通用 block 级元素，h1至 h6一组元素(需要一个更好的词)告诉浏览器其中包含的文本是标题。
CSS 盒模型
请看一下盒子模型和 float 在 CSS 中是如何工作的。 bottom和 top不是 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/
真正的问题在这里
不适用于浏览器。令人惊讶的是，IE8 的异常行为比其前身少得多。尝试编写更好的 HTML 和 CSS。
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
