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. Web项目中JSP页面的一种调试方法与出现的问题 -- SpringMVC架构测试

    在前端开发中,尤其是MVC架构多人开发,负责前端的童鞋总是需要做静态页面,再和后台连接前无法使用变量如EL表达式等测试功能,所以本人引入了一个模板jsp数据测试专用文件,专门配置所有的变量,然后在待测 ...

  2. Python socket 广播信息到所有连接的客户端

    Python3,多线程,多客户端,广播数据 #!/usr/bin/env python3 import time import threading import queue import socket ...

  3. MySQL flush tables with read lock

    mysql> flush tables with read lock; flush tables with read lock 会去关闭已经打开的所有文件,它要做这个操作就先要拿到锁:当发起这个 ...

  4. 在jsp页面中使用自定义标签

    在某些场景中,自定义标签可封装大量代码,使页面变得更简洁,标签也可以很方便地在不同页面中实现通用而不必去粘贴大量的js代码.现在把最近做的一个自定义标签在这里总结一下.首先总结一下关于自定义标签的一些 ...

  5. repo sync 时的自动续接脚本[转]

    按理说在repo init  ....之后使用repo sync就可以开始下载源码了,但是在下载过程中经常会出现没网速“死”的情况.当然,我修改了/etc/hosts文件之后就再也么有死过.在没网速提 ...

  6. 手绘经典QQ头像 请让我一个人呆一会

                                    

  7. Eclipse远程调试weblogic

    http://www.cnblogs.com/dyllove98/archive/2013/08/06/3241140.html http://blog.csdn.net/afgasdg/articl ...

  8. 【hihoCoder第十四周】无间道之并查集

    就是基础的并查集.0代表合并操作,1代表查询操作.一开始以为会卡路径压缩,忐忑的交了一版裸并查集,结果AC了.数据还是很水的. 以后坚持做hiho,当额外的练习啦~ #include <bits ...

  9. art.dialog

    关闭指定弹出窗: art.dialog({ id: 'hetong' }).close(); 关闭所有的iframe弹出窗,art.dia.close();

  10. web前端之 DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...