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. 很强的PHP图片处理类

    /*** 基本图片处理,用于完成图片缩入,水印添加* 当水印图超过目标图片尺寸时,水印图能自动适应目标图片而缩小* 水印图可以设置跟背景的合并度** Copyright(c) 2005 by ustb ...

  2. php简单的爬虫

    爬虫的原理是分析下载的页面,找出其中的连接,然后再下载这些链接,对链接再进行更深层次的递归,周而复始.在数据存储方面,先存储到redis里面,再有redis 写入到mysql,这样可以减轻mysql写 ...

  3. C语言初学 if-else语句判别在ASCII值中小于32的可控制符的类型

    #include<stdio.h> main() { char c; printf("输入一个符号\n"); c=getchar(); if(c<32) prin ...

  4. Gradient Descent 和 Stochastic Gradient Descent（随机梯度下降法）

    Gradient Descent(Batch Gradient)也就是梯度下降法是一种常用的的寻找局域最小值的方法.其主要思想就是计算当前位置的梯度,取梯度反方向并结合合适步长使其向最小值移动.通过柯 ...

  5. mark 的总结开发笔记-备

    2.播放音乐:-(void) playMusic{@try{//取文件路径NSString *musicFilePath = [[NSBundle mainBundle] pathForResourc ...

  6. Android4.0强制横屏竖屏

    Android的启动默认是横屏或者竖屏我们的TV本来是横屏显示,但是有客户竟然要竖屏显示,昨天快下班收到的需求,竟然说7.19就要搞定.思路有2个,一个就是修改LCD的默认输出,但是这个不是我这个水平 ...

  7. [SQL注入2]FROM SQL INJECTION TO SHELL: POSTGRESQL EDITION

    FROM SQL INJECTION TO SHELL: POSTGRESQL EDITION 这里先介绍一下POSTGRESQL.这是一款数据库管理系统,与oracle是同类型软件.08年左右的市场 ...

  8. 用root帐号切换其他帐号提示 su: warning: cannot change directory to /home/oracle: Permission denied

    用root帐号切换其他帐号提示: 出错原因: 基本上是根目录或者是/home/oracle目录权限的问题 解决办法: 更改根目录权限为755,并保证对应用户主目录的所属用户和所属组一致和用户名一致. ...

  9. BZOJ2021: [Usaco2010 Jan]Cheese Towers

    2021: [Usaco2010 Jan]Cheese Towers Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 184  Solved: 107[Su ...

  10. bzoj 1193

    http://www.lydsy.com/JudgeOnline/problem.php?id=1193 大范围贪心,小范围宽搜. 膜拜大神 http://blog.csdn.net/u0129155 ...