IE6、IE7下表格0行高

下面简洁的代码就可以实现table border 1px

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
      <!--
      html,* { margin:0px; padding:0px; }
      table { border-collapse:collapse;  }
      td { padding: 0px 3px; }
      -->
    </style>
  </head>
  <body>
    <table border="1" borderColor="#000000">
      <tbody>
        <tr>
          <td>abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>abc</td>
        </tr>
        <tr>
          <td>abc</td>
          <td>abc</td>
          <td>abc</td>
          <td>abc</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

如果要使用固定列宽，一般会给table加上table-layout:fixed，然后把第一行的行高设置为0(虽然为0，但实际上应该是和第二行重叠，只是看起来就像消失了一样)，然后用第一行来设置列宽，如下代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
      <!--
      html,* { margin:0px; padding:0px; }
      table { border-collapse:collapse; table-layout:fixed; }
      td { padding: 0px 3px; }
      .firstRow { height:0px; }
      .firstRow td { height:0px; }
      -->
    </style>
  </head>
  <body>
    <div style="margin:10px;">
      <table border="1" borderColor="#000000">
        <tbody>
          <tr class="firstRow">
            <td style="width:80px;"></td>
            <td style="width:100px;"></td>
            <td style="width:120px;"></td>
            <td style="width:140px;"></td>
          </tr>
          <tr>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
          </tr>
          <tr>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

上面代码，除IE6、IE7外，都已经实现想要的效果了，但.........IE6、IE7下却....看图

ie6 table 行高为“0”

IE8

IE8下的0行高

此时为第一行添加display:none属性，问题就解决了，没错，你没看错，就是display

.firstRow { *display:none; } 注意前面的“*”号，这个符号只有IE7以下版本支持，其他浏览器是不支持的，而刚好这种现象只有IE7以下版本才存在...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
      <!--
      html,* { margin:0px; padding:0px; }
      table { border-collapse:collapse; table-layout:fixed; }
      td { padding: 0px 3px; }
      .firstRow { height:0px; }
      .firstRow td { height:0px; }

      /*---ie6、ie7---*/
      .firstRow { *display:none; }
      -->
    </style>
  </head>
  <body>
    <div style="margin:10px;">
      <table border="1" borderColor="#000000">
        <tbody>
          <tr class="firstRow">
            <td style="width:80px;"></td>
            <td style="width:100px;"></td>
            <td style="width:120px;"></td>
            <td style="width:140px;"></td>
          </tr>
          <tr>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
          </tr>
          <tr>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
            <td>abc</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

看一下最终效果，和IE8的一样了吧

ie6终于和ie8接轨了

posted @ 2011-07-05 12:03  consatan  阅读(1124)  评论(0)    收藏  举报