【分享】align 在各浏览器中的实现差异及引起的问题

WebAdvocate 2010-09-10 02:51:27

加精

你在使用哪种对齐方式？
你对齐的时候使用哪种方式呢？
align？
text-align?
float?
还是……
各自有各自的好处！
今天就来探索一下 align 属性的对齐。

align 是？
根据 HTML4.01 规范中的描述，图像（IMG）、对象（OBJECT）、表格（TABLE）、框架（IFRAME）等的 align 属性可使该元素浮动到左或右边距。而浮动的元素通常会开始新的一行。此属性的取值如下：
* left：向左浮动该元素，随后的文本显示在其右侧；
* right：向右浮动该元素，随后的文本显示在其左侧。
关于应用在图像（IMG）、对象（OBJECT）、表格（TABLE）、框架（IFRAME）等的 align 属性的详细信息，请参考 HTML4.01 规范 15.1.3 Floating objects 中的内容。
根据以上的说明，align 属性实际上是将元素浮动，然后产生了对齐的效果。

align = 》浮动？
align会引起浮动吗？
让我们一起来看个例子：

<script type="text/javascript">

    function getStyle(obj, style) {

       var _style = (style == "float") ? "styleFloat" : style;

       return document.defaultView ? document.defaultView.getComputedStyle(obj, null).getPropertyValue(style) : obj.currentStyle[_style.replace(/-[a-z]/g, function() {

           return arguments[0].charAt(1).toUpperCase();

       })];

    }

    window.onload = function() {

       document.getElementById("info").innerHTML = "display : " + getStyle(document.getElementById("tester"), "float");

    }

</script>

<table id="tester" style="background-color: red;" align="left">

    <tr>

       <td>hello</td>

    </tr>

</table>

<div id="info" style="background-color:blue; width:200px; overflow:hidden;"></div>

以上代码中，TABLE 有一个属性 align=’left’，说实话，这个属性没什么用，因为它本身就是一个左对齐的表格，但是，请注意它后面的div，这个div中会输出 TABLE 加align属性后的float特性的值；按道理讲，div应该另起一行来显示，注意我给他设置了 overflow:hidden，这时候，它会创建 BFC，而DIV拥有固定宽度也会触发 hasLayout 。
从现象结果上来推断，可以依照这个思路：如果TABLE没有浮动，那么DIV应该另起一行显示值；否则，紧邻TABLE显示。
我们来看看截图：

忽略IE6/IE7(Q)/IE8(Q)中蓝块和红块间3px的间隔，除了IE8的标准模式下，IE中 TABLE 的 float 特性的计算值都是 none。但很奇怪的是，这时TABLE已经具备了浮动元素的特性。

关于 align= ‘right’大家可以自行实验。

align 引起的布局问题
align 属性已被废弃。不赞成被使用。
一起来看一个 align 的兼容性问题。
例子：

<div style="width:300px;">

   <div style="background:#DDD; padding:5px; border:5px solid red;">

       <iframe align="left" style="width:100px; height:42px;"></iframe>

       <iframe align="left" style="width:100px; height:42px;"></iframe>

       <iframe align="right" style="width:100px; height:42px;"></iframe>

   </div>

</div>

截图:

在 IE6/IE7/IE8(Q)下，align 没有影响float 特性，IE中不知道是采用的什么方式对齐的，而且，很明显所有元素被强制放到了同一行。在其他浏览器中，则会根据IFRAME 的宽度判断剩余空间是否足够放置，然后适当的折行。

可以自行尝试 IMG、TABLE、OBJECT是否也会有此种问题。这里有一个现成的IMG的例子：http://www.w3help.org/zh-cn/causes/R/X/8/015/align.html

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

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

...全文