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. HTML&CSS基础学习笔记1.8-预格式文本

    <pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码 ...

  2. 类和对象：给大家介绍对象 - 零基础入门学习Python036

    类和对象:给大家介绍对象 让编程改变世界 Change the world by program 我们之前说过Python无处不对象,Python到处都是对象,然后你会发现很多童鞋其实并不知道对象是什 ...

  3. linux_grep

    grep常用的命令行选项: 选项 说明 -c 只显示有多少行匹配,而不具体显示匹配的行. -h 不显示文件名. -i 在字符串比较的时候忽略大小写. -l 只显示包含匹配模板的行的文件名清单. -L ...

  4. iOS开发 自定义navigationleftItem 之后手势失效的问题

    @property (nonatomic, strong) UIViewController *currentShowVC; //设置代理 self.navigationController.inte ...

  5. 【转】Win7、Ubuntu双系统正确卸载Ubuntu系统--不错

    原文网址:http://my.oschina.net/u/1377657/blog/281872 如果ubuntu不是以wubi方式安装的,而是U盘或者光盘装的双系统,那么卸载ubuntu时要慎重,不 ...

  6. Oracle查询死锁&杀死会话

    select object_name,machine,s.sid,s.serial#  from v$locked_object l,dba_objects o ,v$session s where ...

  7. MapReduce流程、如何统计任务数目以及Partitioner

    核心功能描述 应用程序通常会通过提供map和reduce来实现 Mapper和Reducer接口,它们组成作业的核心. Map是一类将输入记录集转换为中间格式记录集的独立任务. 这种转换的中间格式记录 ...

  8. 教程：30分钟学会Adobe Premiere

    原文地址:http://tieba.baidu.com/p/2785313831 视频教程地址

  9. error recoder,error debug for openStack kilo

  10. 关于cvAdsDiffS的那些事

    cvAbsDiffS 计算数组元素与数量之间差的绝对值 void cvAbsDiffS( const CvArr* src, CvArr* dst, CvScalar value ); #define ...