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

标签 jquery html internet-explorer-8 rendering mozilla

这是一个 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 的输出:

alt text

这是 IE8 的输出:

alt text

问题是什么?

最佳答案

如何修复此页面

让我们来帮您一下...

使用文档类型

查看@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 - 为什么不同的浏览器以不同的方式呈现相同的 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3530902/

相关文章:

javascript - 为动态创建的输入标签分配和更新值 - jquery -Materialize 自动完成

javascript - 此 jQuery getJSON AJAX 调用的回调方法存在问题

html - 如何使第二个列表项元素居中?

internet-explorer-8 - IE6 中的开发工具

jquery - 如何用jQuery重现Flash效果?

javascript - 带 CSS 动画的 Knockout 输入验证

html - @font-face 不工作。我是新手 html & css 用户

html - 在内联 block 布局中为 "empty space"着色

javascript - "indexOf"作为 IE8 中 "for ... in"cicle 数组的键

caching - magento https + IE8 提示问题