打印

HM1002: 各浏览器对 'marginwidth' 和 'marginheight' 属性的错误设定值的处理不同

作者:钱宝坤

标准参考

对于 "marginheight" 和 "marginwidth" ,在 W3C HTML4.01 规范的 Attributes 列表中指出这两个属性可应用在 FRAME 和 IFRAME 上。

W3C HTML4.01 规范中对这两个属性的描述如下:

  • marginheight:用来指定框架的内容区域与框架内边框之间的上下空白距离大小。这个属性值必须是大于零(pixels)的,它的默认值依赖于客户端;
  • marginwidth:用来指定框架的内容区域与框架内边框之间的左右空白距离大小。这个属性值必须是大于零(pixels)的,它的默认值依赖于客户端。

问题描述

当 "marginwidth" 和 "marginheight" 属性值被设定为小于零或其他非法值时,各浏览器对其处理不同。

受影响的浏览器

所有浏览器  

问题分析

造成的影响

一、HTML 中 "marginwidth" 和 "marginheight" 属性与 CSS 中 'margin-top' 'margin-bottom' 'margin-right' 'margin-left' 特性的对应关系

分析我们以下代码:

Margin_Correct.html

<!DOCTYPE html>
<html>
<head>
<style>
  body{background:wheat;}
</style>
</head>
<body>
<iframe src="margin_sub.html" scrolling="no" marginheight="10" marginwidth="10"
style="background:#FF0000;border:#000000 1px solid;width:200px;"></iframe>
</body>
</html>
    

margin_sub.html

<!DOCTYPE html>
<html>
<head>
<style>
  * {font:16px 'Trebuchet MS';}
  body{background:#FFFF00;}
</style>
</head>
<body >
<script>
  if (!window.getComputedStyle) {
    window.getComputedStyle = function ($target) {
      return $target.currentStyle;
    };
  }
        document.open();
        document.write("<div>margin-top:"+getComputedStyle(document.body, null).marginTop+"</div>");
        document.write("<div>margin-bottom:"+getComputedStyle(document.body, null).marginBottom+"</div>");
        document.write("<div>margin-left:"+getComputedStyle(document.body, null).marginLeft+"</div>");
        document.write("<div>margin-right:"+getComputedStyle(document.body, null).marginRight+"</div>");
        document.close();
</script>
</body>
</html>
    

以上代码在父页面 Margin_Correct.html 中通过 IFRAME 标记设置了所嵌入页面 margin_sub.html 中的 "marginwidth" 和 "marginheight" 属性值,然后在 margin_sub.html 中获得该页面的 'margin-top' 'margin-bottom' 'margin-right' 'margin-left' 特性值,其在各浏览器中的运行结果如下:

IE6 IE7 IE8 Firefox Chrome Safari Opera IE6 IE7 IE8 Firefox Chrome Safari Opera
margin-top 10px
margin-bottom 10px
margin-left 10px
margin-right 10px

结合运行结果和标准参考中对规范的解析可知此时的 'margin-top' 'margin-bottom' 'margin-right' 'margin-left' 特性值分别为 margin_sub.html 页面与包含它的框架的上下左右边框之间的空白距离,从而验证了 "marginwidth" 和 "marginheight" 属性值对应着 CSS 中的 'margin-top' 'margin-bottom' 'margin-right' 'margin-left' 特性值。

二、各浏览器对 "marginwidth" 和 "marginheight" 的错误设定值的处理情况

由上文可知, "marginwidth" 和 "marginheight" 属性值对应着 CSS 中的 'margin-top' 'margin-bottom' 'margin-right' 'margin-left' 特性值。

如果, "marginwidth" 和 "marginheight" 属性未设置,那么各浏览器中将采用各自的默认 'margin' 值,他们如下:

  IE6 IE7 IE8(Q) IE(S) Chrome Safari Firefox Opera
margin-top 15px 8px
margin-bottom 15px 8px
margin-left 10px 8px
margin-right 10px 8px

在知晓各浏览器 'margin' 默认值设定情况下,我们来看各浏览器针对 "marginwidth" 和 "marginheight" 错误值处理。

1、将 "marginwidth" 和 "marginheight" 属性值设定为负数,修改上述代码中的高亮部分为如下所示:

marginheight="-1" marginwidth="-1"

运行修改后的测试例子,其运行结果如下:

IE6 IE7 IE8 Firefox Opera Chrome Safari
margin-top 0px 8px
margin-bottom 0px 8px
margin-left 0px 8px
margin-right 0px 8px

从运行结果可以看出修改后的代码:

  • IE6 IE7 IE8 Firefox Opera 中,运行结果既不是设定值也不是浏览器的默认值而是0,这说明这些浏览器将这两个属性的错误值 "-1" 首先修复为 "0" ,当作用在 CSS 的 'margin' 特性时,导致 'margin-top' 'margin-bottom' 'margin-right' 'margin-left' 特性值均被设置为 0 ,他们覆盖了浏览器默认。所以这可以理解为这些浏览器存在 "marginwidth" 和 "marginheight" 值设置为负数时,存在将负数值修复为可用值 0 的情况。
  • Chrome Safari 中,最终 'margin' 值为浏览器默认值。这说明 "marginwidth" 和 "marginheight" 值设置为负数时,浏览器忽略了存在错误值的属性,其值无法对应到 CSS 的 'margin' 中,导致浏览器使用默认 'margin' 值来显示页面。

 

2、将 "marginwidth" 和 "marginheight" 属性值设定为非数字的非法字符,修改上述代码中的高亮部分为如下所示:

marginheight="a" marginwidth="a"

运行修改后的测试例子,其运行结果如下:

  IE6 IE7 IE8(Q)1 Chrome Safari IE8(S)2 Firefox Opera
margin-top 15px 0px 8px 5px
margin-bottom 15px 0px 8px 5px
margin-left 10px 0px 8px 5px
margin-right 10px 0px 8px 5px

从运行结果可以得知:

  • IE6 IE7 IE8 Firefox 中,"marginwidth" 和 "marginheight" 值设置为非数值时,览器忽略了存在错误值的属性,其值无法对应到 CSS 的 'margin' 中,导致浏览器使用默认 'margin' 值来显示页面。
  • Chrome Safari 中,浏览器将 "marginwidth" 和 "marginheight"的非数值赋值错误修复,使他的的设置值为 0 ,并将浏览器默认 'margin' 值覆盖。
  • Opera 中,也遵守了类似 Chrome Safari 的修复情况。但不同的是,Opera 将非数值赋值错误修复为设置值 5px ,并将浏览器默认 'margin' 值覆盖。

注【1】:这里的混杂模式是指 margin_sub.html 处于混杂模式下;
注【2】:这里的标准模式是指 margin_sub.html 处于标准模式下。

 

综合上所述,各浏览器对 "marginwidth" 和 "marginheight" 的错误设定值的处理不同,会导致较大渲染差异。

解决方案

在使用 "marginwidth" 和 "marginheight" 时应严格遵照规范中的描述,要对其设定大于等于零的数值。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.10
Chrome 7.0.544.0 dev
Safari 5.0.2
Opera 10.62
测试页面: Margin_Correct.html
margin_wrong1(S).html
margin_wrong1(Q).html
margin_wrong2(S).html
margin_wrong2(Q).html
【注】:本页中测试连接部分所标注的文档模式均指 margin_sub.html 所处于的文档模式。

本文更新时间: 2010-10-08

关键字

marginwidth marginheight margin iframe frame