为什么不同的浏览器呈现不同的HTML？ [英] Why do different browsers render the same HTML differently?
问题描述
这是一个html页面：
< html>
< head>
< title>
框架设置
< / title>
< script type =text / javascriptsrc =jquery-1.4.2.min.js>< / script>
< link rel =stylesheethref =frame.csstype =text / cssmedia =screen/>
< script language =JavaScripttype =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 =mainalign =centerstyle =width：1000px; height：100％; text-align：left;>
< div id =inner1style =width：100％; height：20％; float：top; margin-bottom：20px;>
< div id =inner11>
< div class =frame>
< div class =hstyle =width：100％> Header< / div>
< div class =lstyle =height：93％>< / div>
< div class =r>< / div>
< div class =b>< / div>
< / div>
< / div>
< / div>
< div id =inner2style =width：100％; height：60％;>
< div id =inner21style =width：69％; float：left; margin-left：1px; margin-right：1px;>
< div class =frame>
< div class =hstyle =width：100％> Left Frame< / div>
< div class =lstyle =height：93％>< / div>
< div class =r>< / div>
< div class =b>< / div>
< / div>
< / div>
< div id =inner22style =width：29％; float：right; margin-left：1px; margin-right：1px;>
< div class =frame>
< div class =hstyle =width：100％>右框< / div>
< div class =lstyle =height：93％>< / div>
< div class =r>< / div>
< div class =b>< / div>
< / div>
< / div>
< / div>
< div id =inner3style =width：100％; height：20％; float：bottom; margin：2px 2px 2px 2px;>
< div id =inner23>
< div class =frame>
< div class =hstyle =width：100％>页脚< / div>
< div class =lstyle =height：93％>< / div>
< div class =r>< / div>
< div class =b>< / div>
< / div>
< / div>
< / div>
< / div>
< / body>
< / html>
这是Mozilla的输出：
< img src =https://i.stack.imgur.com/3ETIQ.jpgalt =alt text>
这是IE8输出：
>
是什么问题？
如何解决此页面
让我们在这里帮你一下......
使用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/元素框架窗口
给你的类有意义的名字。其原因对于任何其他语言都是一样的 - 所以当你三个月后回来时，你不会在名为 l ， r 和 h 。
使用符合语义的HTML
align 和 text-align 属性被正式弃用;请参阅上面的解决方案，使事物中心对齐，并改为使用CSS属性 text-align 属性。
HTML元素赋予它们所包含内容的含义。您为每个框架设置的标题应标记为 请看看box模型和浮动框架如何在CSS中工作。 http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/#cssboxmodels 不在浏览器中。令人惊讶的是，IE8的行为比其前辈少得多。尝试编写更好的HTML和CSS。 This is an html page : This is Mozilla output : This is IE8 output : What is the problem ? Let's help you out here a bit... See @Topera's answer Please do not use Instead, use the CSS property See: 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 The HTML elements give meaning to the content they are wrapped in. The headers you have for each 'frame' should be marked up with Please have a look at how the box model and floats work in CSS. http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/#cssboxmodels is not with the browsers. IE8 surprisingly misbehaves much less than its predecessors. Try writing better HTML and CSS instead. 这篇关于为什么不同的浏览器呈现不同的HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！< h2> ; 或< h3> 标题 - 而 div s是通用块级元素没有意义， h1 到 h6 元素集（为了更好的单词）告诉浏览器包含在其中的文字是标题。
CSS盒子模型
底部和顶部对于CSS 浮动无效值财产。
http://reference.sitepoint.com/css/boxmodel
< a href =http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ =noreferrer> http://www.smashingmagazine.com / 2007/05/01 / css-float-theory-things-you-should-know /
真正的问题在这里
<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>
How to fix this page
Use a Doctype
To make everything center aligned
var winSize = $(window).width();
var margin = (winSize-1000)/2;;
$('#main').css({'margin-left':margin,'margin-right':margin});
}
margin: 0 auto. As a rule of thumb, always use a CSS solution instead of a Javascript where possible.To create equal height columns
http://www.positioniseverything.net/articles/onetruelayout/equalheight
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacksUse the correct terminology and better class name
l, r and h. Use semantically valid HTML
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. <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
bottom and top are not valid values for the CSS float property.
http://reference.sitepoint.com/css/boxmodel
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/The Real Problem Here
