【问题标题】:Why do different browsers render the same HTML differently?为什么不同的浏览器会以不同的方式呈现相同的 HTML?
【发布时间】:2011-04-01 15:33:28
【问题描述】:

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

有什么问题?

【问题讨论】:

  • 欢迎来到 Web 开发的世界
  • IE! IE! IE Ftagn!
  • 叹息...这是渲染,而不是输出。并且已经用标点符号停止它。
  • 等你在IE6上测试!
  • @Sarang - 我对您问题中的拼写和语法进行了一些改进。我看到我是第四个这样做的人。您坚持回滚这些更正的任何特殊原因?只是指出FAQ 中的一点点如果您对其他受信任的用户正在编辑您的问题和答案的想法感到不满意,那么这可能不适合您。

标签: jquery html internet-explorer-8 rendering mozilla


【解决方案1】:

如何修复此页面

让我们在这里帮助你一点......

使用文档类型

查看@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

给你的班级起有意义的名字。这样做的原因对于任何其他语言都是一样的——所以当你在三个月后回来时,你不会在名为 lrh 的课程中​​摸不着头脑。

使用语义上有效的 HTML

aligntext-align 属性已正式弃用;请参阅上面关于使事物居中对齐的解决方案,并改为使用 CSS 属性 text-align 属性。

HTML 元素赋予它们所包含的内容以意义。每个“框架”的标题应该用&lt;h2&gt;&lt;h3&gt; 标题标记,而divs 是通用块级元素没有意义,h1h6 的元素集(因为缺少更好的词)告诉浏览器其中包含的文本是标题。

CSS 盒子模型

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

【讨论】:

    【解决方案2】:

    你错过了页面第一行的标签&lt;!DOCTYPE&gt;

    例如:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    

    如果不放,IE会激活quirks mode,会发生很奇怪的事情。 当浏览器激活 quirks 模式时,很多事情都会发生变化,例如 box model

    注意:许多浏览器都有怪癖模式,不仅仅是 IE(我知道 firefox 也有)。


    更多关于quirks mode

    doctypes列表。

    【讨论】:

    • 我用过严格、宽松和繁体。
    • @Sarang:Doctype 使浏览器尽可能准确地呈现页面,因为它可以作为该类型的文档。如果它使事情变得“小”,那是因为它们被写成小东西。
    【解决方案3】:

    问题在于并非所有浏览器都使用相同的渲染引擎或渲染规则。对于网络开发人员来说,这是一个持续不断的悲痛之源,而且似乎不会很快消失。

    尽可能使用 CSS,因为在严格的样式表规则下,浏览器往往会最好地遵守。除此之外,祝你好运,欢迎来到网络开发 :)

    【讨论】:

      【解决方案4】:
      1. 使用文档类型:list 在 我会使用的那一刻-> XHTML 1.0 严格,XHTML 1.1,HTML5(如果 你不熟悉 可能出现的问题

      2. 使用重置:eric meyers reset 例如是一个很好的例子

      3. 使用 clearfix(并知道何时使用),例如 Jeff Starr 的 the new clearfix

      使用这三样东西,是让您的网站在所有浏览器中看起来都一样的良好开端。 之后您必须了解自定义浏览器错误,例如double margin bug 等。

      【讨论】:

      • +1 提到使用重置 - 在竞争环境公平之前,您不知道自己是否正在处理浏览器怪癖。
      【解决方案5】:

      要成为跨浏览器,您需要多种工具、丰富的经验,如果是 IE,还需要很多运气。 除了此处的其他答案之外,您还可以使用 Yahoo CSS,它为您提供了一个通用基础(所有浏览器都没有相同的默认值): http://developer.yahoo.com/yui/reset/

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2023-03-12
        • 2018-01-07
        • 2015-12-28
        • 2012-03-09
        • 1970-01-01
        • 1970-01-01
        • 2011-06-24
        • 2015-09-01
        相关资源
        最近更新 更多