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

你猜 阅读:34 2023-11-05 18:46:41 评论:0

这是一个 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)上挠头了。 , rh .

使用语义上有效的 HTML

aligntext-align属性已正式弃用;请参阅上面关于使事物居中对齐和 CSS 属性的解决方案 text-align属性(property)代替。

HTML 元素赋予它们所包含的内容以意义。每个“框架”的标题应标记为 <h2>。或 <h3>标题代替 - 而 div s 是没有意义的通用 block 级元素,h1h6一组元素(需要一个更好的词)告诉浏览器其中包含的文本是标题。

CSS 盒模型

请看一下盒子模型和 float 在 CSS 中是如何工作的。 bottomtop不是 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。


标签:jquery
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

全民解析

全民解析

关注我们