zoukankan      html  css  js  c++  java
  • IE6IE9兼容性问题列表及解决办法_补充之三:Table的Col不再支持style及align,需要到th, td中去设置

    在IE6, IE7时代,如果想隐藏Table中的某一列,可以在Col中设置一个style="display:none"就搞定了,代码如下:

                  <TABLE >
                    <COLGROUP>
                      <COL align="left" width="80"></COL>
                      <COL align="right" width="50" style=”display:none”></COL>
                    </COLGROUP>
                    <THEAD>
                      <TR>
                        <TH >学生姓名</TH>
                        <TH> 学生编号</TH>
                      </TR>
                    </THEAD>
                    <TBODY>
                      <TR>
                        <TD >张三</TD>
                        <TD >1</TD>
                      </TR>
                    </TBODY>
                  </TABLE>


    但从IE8某些版本开始就不支持了,IE9也是同样不支持, 具体信息可以参考下面这篇文章:

    HE1004: IE8(S) Firefox Chrome Safari 不再支持 COL COLGROUP 元素的部分属性及为其设定的 CSS 特性http://www.w3help.org/zh-cn/causes/HE1004

    在这里引用一下该文对各浏览器col中支持的元素对比表格:


    到了IE9,虽然已经不支持col的align和style属性了,但还支持width属性,而在Html5中,col中连width也不支持了,IE10还能支持width,但随着IE对html5支持的不断加强,到了IE11,还能否支持width,就难说了。
    因此,笔者建议解决方法就是放弃在colgroup, col中设置样式,转而直接在td, th中设置。

    即如下面代码所示,th上设置align, width, style, td上只需设置style即可。

              <TABLE >
                    <COLGROUP>
                      <COL align="left" width="80"></COL>
                      <COL align="right" width="50" ></COL>
                    </COLGROUP>
                    <THEAD>
                      <TR>
                        <TH align="left" width="80" >学生姓名</TH>
                        <TH align="right" width="50"  style=”display:none”> 学生编号</TH>
                      </TR>
                    </THEAD>
                    <TBODY>
                      <TR>
                        <TD >张三</TD>
                        <TD style=”display:none”>1</TD>
                      </TR>
                    </TBODY>
                  </TABLE>


    越来越有一种感觉,IE9,除了名字还叫IE,里面的内容,哈哈,真可以说完全换了。

  • 相关阅读:
    spring培训PPT
    如何创建新模块 DotNetNuke 6 & Entity Framework Code First
    博客园 漂浮快捷操作
    Ext.net中如何上传文件
    Excel与数据库之间的那些事
    关于SQL一对多关系转换的效率思考
    JQuery的结构Dive into jQuery
    《JAVA与模式》之简单工厂模式
    JSM SqlHelper 2.0 新特性(C#)
    mutex互斥锁
  • 原文地址:https://www.cnblogs.com/liuzhendong/p/2684161.html
Copyright © 2011-2022 走看看