股票为什么跌

当前位置:股票配资 > 网页设计 > HTML/CSS > 正文  |  快速导航:Dreamweaver FontPage HTML/CSS XML/XHTML SharePoint 制作技巧
  • FireFox(火狐)下table内容不能居中

  • 字号:[ ]2013-10-15 2:05:36  阅读:228次  来源:乐猪网  编辑:银河精灵  收藏
  • 摘要:最近,把公司的一个项目不停地做性能优化。一方面是前台和后台代码的优化,另一方面是浏览器兼容性的优化。很多朋友会和我犯同样的错误,就是使用align=center把table内容进行居中,这种做法在IE可行,但不能兼容其他浏览器!
  • 我们先看一段乐猪做的测试代码:

    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head id="Head1" runat="server"> 
        <title>测试table居中兼容性</title> 
    </head> 
    <body> 
        <form id="form1" runat="server"> 
            <table width="500" border="1" cellpadding="0" cellspacing="0" align="center"> 
                <tr> 
                    <td>这是兼容浏览器居中内容!</td> 
                </tr> 
                <tr> 
                    <td><table width="300" border="1" cellpadding="0" cellspacing="5"> 
                        <tr> 
                            <td>这个table是否会居中!</td> 
                        </tr></table> 
                    </td> 
                </tr> 
            </table> 
            <table width="500" border="1" cellpadding="0" cellspacing="0" style="text-align:center;"> 
                <tr> 
                    <td>这是兼容浏览器居中内容!</td> 
                </tr> 
                <tr> 
                    <td><table width="300" border="1" cellpadding="0" cellspacing="5"> 
                        <tr> 
                            <td>这个table是否会居中!</td> 
                        </tr></table> 
                    </td> 
                </tr> 
            </table> 
            <table width="500" border="1" cellpadding="0" cellspacing="0" style="text-align:center; margin:0px auto;"> 
                <tr> 
                    <td>这是兼容浏览器居中内容!</td> 
                </tr> 
                <tr> 
                    <td><table width="300" border="1" cellpadding="0" cellspacing="5" style="text-align:center; margin:0px auto;"> 
                        <tr> 
                            <td>这个table是否会居中!</td> 
                        </tr> 
                        <tr> 
                            <td><table width="100" border="1" cellpadding="0" cellspacing="5"> 
                                <tr> 
                                    <td>是否所有里层都居中!</td> 
                                </tr></table> 
                            </td> 
                        </tr></table> 
                    </td> 
                </tr> 
            </table> 
        </form> 
    </body> 
    </html>

    IE7 中显示结果:

    IE8、IE9、FireFox 等中显示结果:

    实验证明,在 IE7 浏览器中,table 使用 align=center 可以使文本内容和所有标签居中,但在 IE8、IE9、FireFox、Chrome、Safari、Opera 等浏览器中,只可以使文本内容进行居中,这点一定要记住!

    那么,有没有办法可以解决 table 居中兼容各个浏览器的方法呢?方法是有的!

    方法一:
    在 table 中,不要使用 align=center 或 style=text-align:center 的样式,通过宽度搭配 padding-left、padding-right 等样式解决居中问题,这是小编过去比较常去的方法。

    方法二:
    这是小编不常的方法,不过也是可以解决一些复杂度底的居中问题。就是使用 align=center 和 margin:0 auto 进行兼容性设置。不过,需要注意的是,从上面的实例可以看出,这一组合样式设置不能像 IE7 一样,把里面的每一层都居中。所以,使用这种方法,只能一层一层地进行设置样式。

    1.IE浏览器下:层或table水平居中的最低要求
    IE中在body中加入text-align:center,即可实现主布局块居中。
    body{text-align:center}
    或者设置
    <table align="center">
    2.FireFox浏览器下:层或table水平居中的最低要求
    .demo{margin:margin:0 auto}
    <div class="demo">
    3. 因此,想要让层或table在ie浏览器和firefox浏览器都水平居中的话,就需要:
    body{text-align:center}
    .demo{width:980px;margin:margin:0 auto}
    <div class="demo">
    </div>
    或者
    talbe{margin:0 auto}
    股票为什么跌<table align="center">

  • 顶一下
    (0)
    0%
    踩一下
    (0)
    0%
乐猪网 版权所有 Copyright © 2012-2015 tghxpu.wang All rights reserved.
本站用于学习交流,部分文章来源于网络,如果不慎侵犯了您的权益,请联系我们删除!
粤ICP备12000837号

股票为什么跌