【分享】Table元素的 align='center' 会受 margin 值的影响吗？

TABLE 的 align=’center’
根据HTML4.01 规范中的描述，TABLE 元素的 align 属性，这个属性可以取 'left'、'center'、'right' 三个值。它指定了 TABLE 元素在文档中的位置，三个属性值分别对应 '居左'、'居中'、'居右'，描述的是 TABLE 元素自身相对于其父容器的对齐方式。
同时，align 属性已被废弃。不赞成使用。  
关于 TABLE 元素的 align 属性 的详细信息，请参考 HTML4.01 规范 11.2.1 The TABLE element 中的内容。

在上一个帖子中：【分享】align 在各浏览器中的实现差异及引起的问题
，已经大致的介绍了关于它的知识，以及引起的兼容性问题。也介绍 了 align=’left’ align=’right’的实现。那么，align=”center” 又是如何实现的呢？

Firefox3.6 中的实现
Firefox3.6源码中的实现：
Firefox 3.6：/content/html/content/src/nsHTMLTableElement.cpp  
C/C++ code

static void
MapAttributesIntoRule(const nsMappedAttributes* aAttributes, nsRuleData* aData){
    ...
        const nsAttrValue* value = aAttributes->GetAttr(nsGkAtoms::align);
        if (value && value->Type() == nsAttrValue::eEnum) {
            if (value->GetEnumValue() == NS_STYLE_TEXT_ALIGN_CENTER ||
                value->GetEnumValue() == NS_STYLE_TEXT_ALIGN_MOZ_CENTER) {
                nsCSSRect& margin = aData->mMarginData->mMargin;
                if (margin.mLeft.GetUnit() == eCSSUnit_Null)
                    margin.mLeft.SetAutoValue();
                 if (margin.mRight.GetUnit() == eCSSUnit_Null)
                    margin.mRight.SetAutoValue();
            }
        }
    ...
}

注意 margin.mLeft.SetAutoValue(); 和 margin.mRight.SetAutoValue();

非IE中margin 影响 align=”center”
例子：
HTML code

<div id="d" style="width:300px; height:50px; background:thistle;">
   <table id="t" cellspacing="0" style="width:200px; border:3px solid black; " align="center">
       <tr>
           <td style="background:wheat;">Text Text Text Text Text Text</td>
       </tr>
   </table>
</div>

上面代码中的 align=”center”的TABLE，同时设置了 margin 属性。
各浏览器中的截图：
IE

Firefox/Chrome/Safari/Opera

可能在Firefox/Chrome/Safari/Opera中，都是用 margin:auto实现的居中，但是看计算后的值却不是auto……

解决方案
见：http://www.w3help.org/zh-cn/causes/RX8004#solutions 解决方案部分

原文
地址：http://www.w3help.org/zh-cn/causes/RX8004

更多兼容性问题：
【分享】浏览器兼容性问题目录

收藏了....
有时间再看...呵呵！

自卫队柑桔硒鼓村

不错不错滴。。