W3Help

标准

兼容性

打印

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