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

WebAdvocate 2010-09-10 04:58:41

加精

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

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”
例子：

<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

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

...全文

2364 61 打赏收藏转发到动态举报

写回复

用AI写文章

61 条回复

切换为时间正序

请发表友善的回复…

发表回复

oreap 2010-09-27

打赏
举报

正好用到這個東東

tuhuolongan 2010-09-20

打赏
举报

现在就看不等以后

gang9527999 2010-09-19

打赏
举报

看哈！！

jjwlove 2010-09-18

打赏
举报

不错！

qingyuzitong 2010-09-18

打赏
举报

不错不错滴。。

专注挖煤二十年 2010-09-18

打赏
举报

学习。。。。。

wxlgyl 2010-09-17

打赏
举报

还没看得懂，收藏再研究

robin41209 2010-09-17

打赏
举报

标记下，有时间再看。

liqiang3118282 2010-09-16

打赏
举报

杯具，幸好有加班费的，也可以调休

cqumomo 2010-09-15

打赏
举报

路过学习

tizll521 2010-09-15

打赏
举报

路过学习

懒虫虫 2010-09-15

打赏
举报

是的，这些兼容问题好麻烦！！

yqinying 2010-09-15

打赏
举报

jiefen iiii

yxz182407966 2010-09-15

打赏
举报

h呵呵，不错

binadan 2010-09-15

打赏
举报

经常调页面调来又调去还是没法做到满足所有人

lmc158 2010-09-14

打赏
举报

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();
}
}
...
}