text-align存在的兼容性问题分析

最新推荐文章于 2023-09-27 18:52:31 发布

茂树24

最新推荐文章于 2023-09-27 18:52:31 发布

阅读量7.8k

点赞数

分类专栏： CSS2.1 文章标签： text-align 兼容性的问题 css 文本属性

本文链接：https://blog.csdn.net/wmaoshu/article/details/52836000

版权

CSS2.1 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

text-align

这个属性存在兼容性的问题，原因在于css2.1和css1之间标准规范不同，但是IE6IE7混杂模式下的IE8还遵循css1的规范。

CSS2.1规范如下：
Text-align
应用于：块元素，表格单元格，行内块元素
有继承性
仅仅对“块元素，表格单元格，行内块元素”中的行内内容起作用。
CSS1规范如下：
Text-align
应用于：块元素
有继承性
对“块元素”中的所有元素起作用。

举例说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
    <style> 
    div {
        width: 250px;
        background-color: yellowgreen;
        text-align: center;
    }
    p {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    table {
        width: 100px;
        height: 100px;
        background-color: blue;
    }

    </style>
</head>
<body>
    <div>
        <img src="images/bg.gif" ><br>
        text-align遵循CSS2.1规范，具备继承性，可以应用于块级元素、表格单元格及行内块级元，仅仅对行内内容起作用
        <p>
            <img src="images/bg.gif"><br>
        </p>
        <table>
            <tr>
                <td>table</td>
            </tr>
        </table>
    </div>
</body>
</html>

在支持CSS2.1浏览器下表现如下：
这里写图片描述
可以看出，div内img和文字都是行内内容，所以center对齐，但是p和table不是行内内容不能center对齐，由于text-align存在继承性，同时p（块元素）table中单元格（表格单元格）在CSS2.1支持text-align属性，所以p和table单元格继承了该属性，同时导致他们的行内内容（img和表单单元格行内内容）也center对齐。

在IE6IE7IE8（Q）下表现情况：

这里写图片描述

会发现div块元素中所有的元素都center对齐了，但是对table中单元格没有继承该属性，因为css1规定只有块元素具有该属性。

所以说为了解决这种兼容性的问题：
尽可能对块元素应用该属性，并且块元素内部只能有行内内容。
如果说非要让块元素内部块元素center对齐的话最好使用margin ： 0 auto。二对于左右对齐使用浮动的方式，但要注意清浮动。
这里就引出了一点，margin：0 auto 和text-align区别：
margin：0 auto 是本块元素位于其父元素中位置是水平居中的，text-align是指该块元素内部的行内内容是水平居中的。

茂树24

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
text-align存在的兼容性问题分析

text-align这个属性存在兼容性的问题，原因在于css2.1和css1之间标准规范不同，但是IE6IE7混杂模式下的IE8还遵循css1的规范。 CSS2.1规范如下： Text-align 应用于：块元素，表格单元格，行内块元素有继承性仅仅对“块元素，表格单元格，行内块元素”中的行内内容起作用。 CSS1规范如下： Text-align
复制链接

扫一扫