大佬教程收集整理的这篇文章主要介绍了jquery – 为什么不同的浏览器会渲染相同的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输出：
问题是什么 ？
我们来帮你一下吧
使用Doctype
见@ Topera的答案
使一切中心对齐
请不要使用
var winSize = $(window).width(); var margin = (winSize-1000)/2;; $('#main').css({'margin-left':margin,'margin-right':margin}); }
而是使用CSS@L_698_6@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是通用的块级元素，没有意义，h1到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。
以上是大佬教程为你收集整理的jquery – 为什么不同的浏览器会渲染相同的HTML？全部内容，希望文章能够帮你解决jquery – 为什么不同的浏览器会渲染相同的HTML？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。