1.假如创建一个空表 ，然后去设置它的innerHTML，并获取表单的高度；在ie10及其他的浏览器中，会像预期一样正常被解析出来；

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

     <style>

         *{margin: 0;padding:0}

     </style>

</head>

<body>

  <div id="demo"></div>

  <p id="demo1">some <em>message</em> \t and &nbsp; some leveal</p>

  <table id = "table" border="1" style="height: 200px;background: red;"></table>

  <input type="text" id="input1">

  <script type="text/javascript">

      $table = document.getElementById('table')

      $tr = document.createElement('tr')

      try{

      $table.innerHTML = '<tr><td>some message</td></tr>'

      }catch(ex){}

      document.getElementById('input1').value = $table.currentStyle['height']

  </script>

</body>

</html>

在ie8,ie9中报错，浏览器会渲染出table,并把它展现在页面上，但不会渲染出里面的内容,（解析结果为 <table id="table" style="height: 200px; background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: red;" border="1">)

在ie6,ie7中报错，浏览器会渲染出table，但不会把它展现在页面上，(解析结果为<table id="table" style="height: 200px; background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-color: red;" border="1"><tbody/>）

通过其解析结果可以看出，浏览器都将它样式解析完成。我们可以通过currentStyle[attr]来获取样式，但不同点在于，ie6 ie7不会展现在页面上，意思就是在ie6 7的页面上，没有table的存在，它在页面中的位置没有了，但我们可以通过获取样式取到它的值，就像它是display:none一样，ie8 9中，table会展现在页面上，但其中没有任何内容

截图如下

2.假如创建一个没有tbody的非空表单，并给它添加一行，获取它的高度；

<!DOCTYPE html>

<html>

<head>

    <title>改变元素里面的内容</title>

    <meta charset="utf-8">

     <style>

         *{margin: 0;padding:0}

     </style>

</head>

<body>

  <div id="demo"></div>

  <p id="demo1">some <em>message</em> \t and &nbsp; some leveal</p>

  <table id = "table" border="1" style="height: 200px;background: red;">

       <tr><td>default message</td></tr>

  </table>

  <input type="text" id="input1">

  <script type="text/javascript">

   $table = document.getElementById('table')

   $tr = document.createElement('tr')

   try{

     $tr.innerHTML = '<tr><td>new message</td></tr>'

     $table.appendChild($tr)

   }catch(ex){}

    document.getElementById('input1').value = $table.currentStyle['height']

  </script>

</body>

</html> 

只会在ie6 7中添加失败,在ie8 9中会被正常添加进去，但会解析的不一样,截图如下

 

ps：

1）所有浏览器（除ie6审核不了元素，原码没有tbody)都会隐式的创建tbody

2）ie6 7不能添加新的一行到tbody，ie7中的会被解析成,（新添加进的tr被加到了tbody外，因此，不能成功解析）

3)  成功添加后

a)   ie  ff  新添加进的tr会和原来的tr平分表单的高度，其余的只会是浏览器本身默认的tr的高度

b)  ie10  ff会将新添加进的一行内容垂直居中，其余的不会

c)  webkit内核的浏览器的table的高度为198px，其余的为200px (原因是webkit的会把border去除，但ff不会去除）

table不能遗露了tbody的更多相关文章

  1. table 的thead th 固定 tbody滚动例子

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. table标签中thead、tbody、tfoot的作用

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示, ...

  3. table固定头部，表格tbody可上下左右滑动

    当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下: html代码: <div class="table_box_big"> ...

  4. 关于table的一些记录

    HTML有10个表格相关标签 <caption> 表格的大标题,该标记可以出现在<table> 之间的任意位置.它对于搜索引擎的机器人记录信息十分重要.参数有align.val ...

  5. javascript: 带分组数据的Table表头排序

    如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变 从网上找了一段常规的table排序,改了改,以满足“分组支持”,贴在这里备份 < ...

  6. js实现table排序-sortable.js

    方案一.引用sortable.js包 /* <th class="thcss" style="width: 40px;" onclick="so ...

  7. 收集的冻结table 标题和左侧（完美）

     <html> <head>     <meta name="viewport" content="width=device-width&q ...

  8. 获取table表格的一些不为人知的属性

    JS获取表格的简便方法:获取tbody:tBodies   获取thead:tHead   获取tfoot:tFoot   获取行tr:rows   获取列td:cells 使用实例: oTable. ...

  9. 一天搞定CSS：表格（table）--19

    1.表格标签 表格标签的嵌套关系 <table> <!--表格头--> <thead> <!--表格行--> <tr> <!--表格列 ...

随机推荐

  1. 深入研究MiniMVC之后续篇

    今天在园子看到<深入研究 蒋金楠(Artech)老师的 MiniMvc(迷你 MVC),看看 MVC 内部到底是如何运行的>之后,本来是不打算开博来续这个后传,不过,在那边回了个评论之后, ...

  2. github 推送时can't be established.

    http://www.xuebuyuan.com/2095099.html 飞凡@FANZ /e/learngit (master)$ git push origin masterThe authen ...

  3. php 之 类，对象

    --恢复内容结束--- 一.类和对象: 1.定义: 对象:我们所见到的东西都可以称之为对象,是类实例化出来的东西 类:是对所有的同类对象抽象出来的东西 eg: 在一张表中记录了全班同学的学号,姓名,性 ...

  4. 在PHP中PDO解决中文乱码问题

    $this->pdo = new PDO($dsn, $user, $password, array(PDO::ATTR_PERSISTENT => true)); $stmt = $th ...

  5. HTML&CSS基础学习笔记1.11—导航栏

    上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航 ...

  6. android 巧用finish方法

    在android应用开发中,我们从一个activity跳到另一个activity时,我么要用到Intent: eg:Intent intent = new Intent(A.this,B.class) ...

  7. SVN莫名出错，网上找遍无果，递归删除当前目录下所有.svn文件名

    哎,太深刻的教训. 原来以前其它目录里有.SVN目录 ,而此SVN目录COPY到真正的SVN工作目录之后,会将有用的.SVN目录覆盖. 那么一样,显然,CI,UPDATE,CO之间的命令全部异常... ...

  8. Delphi - GetUserNameEx（学一下导出Windows API，以及Array Char充当缓冲区的用法，下标必须从零开始）

    (* * Author : http://www.michael-puff.de * Date : 2006-03-29 * License : PUBLIC DOMAIN *) function G ...

  9. C#反射 获取程序集信息和通过类名创建类实例（转载）

    C#反射获取程序集信息和通过类名创建类实例 . System.Reflection 命名空间:包含通过检查托管代码中程序集.模块.成员.参数和其他实体的元数据来检索其相关信息的类型. Assembly ...

  10. fuck WPFG.org

    今天一旦进入国外网站,就立刻跳转到WPFG.org.可能DNS被劫持污染了吧.用OpenDNS就行了.然后就没有这回事发生了 参考以下: https://www.opendns.com https:/ ...