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. git基础使用小记

    一.安装步骤省略二.运行“Git Bash“在打开的窗口中输入:ssh-keygen -t rsa -C "my@gmail.com" 会提示SSH Public Keys存放的位 ...

  2. dedecms _ 当前位置问题的代码

    {dede:field name='position' runphp='yes'} $tc=" > "; $tf=split($tc,@me); $tn=count($tf) ...

  3. pod应用--备用

    一.概要 iOS开发时,项目中会引用许多第三方库,CocoaPods(https://github.com/CocoaPods/CocoaPods)可以用来方便的统一管理这些第三方库. 二.安装 由于 ...

  4. 自定义高级QFileDialog文件过滤器

    QFileDialog提供了一个函数---setproxyModel..就是用这个来玩了.就是override filterAcceptsRow的虚函数,里面定制自己的过滤需求.返回bool   下面 ...

  5. Android中实现全屏、无标题栏的两种办法（另附Android系统自带样式的解释）

    在进行UI设计时,我们经常需要将屏幕设置成无标题栏或者全屏.要实现起来也非常简单,主要有两种方法:配置xml文件和编写代码设置. 1.在xml文件中进行配置 在项目的清单文件AndroidManife ...

  6. Linux watch 命令

    man watch: WATCH(1) Linux User's Manual WATCH(1) NAME watch - execute a program periodically, showin ...

  7. HDU--3487 Play with Chain (Splay伸展树)

    Play with Chain Problem Description YaoYao is fond of playing his chains. He has a chain containing ...

  8. cocos2dx-lua绑定自定义c++类（二）

    在 cocos2dx-lua绑定自定义c++类(一)中介绍了如何产生绑定文件. 现在,来看看怎么在工程里使用这个cpp文件.像普通源码文件一样,导入到工程里,看到 LuaTest.h文件里有一个函数入 ...

  9. 【POJ1338】Ugly Numbers（暴力打表）

    打表大军是一股邪恶势力→_→ #include <iostream> #include <cstring> #include <cstdlib> #include ...

  10. 如何安装CocoaPods

    转自 http://www.99css.com/1321/ 在 iOS 项目开发中,经常会用到第三方的源代码,CocoaPods 就是为了方便管理这些源码的工具. 在官方教程里面,安装看起来非常简单 ...