`

IE7、IE8 对于W3C标准 tbody 的兼容问题

阅读更多
最近在处理静态化模板的时候,动态生成右上角登录框,出现了IE7无法显示的问题。
在IE7中一闪而过。
但是在IE8、firefox、chrome 中都能正常显示。
源码如下(涉及商业问题,略作修改):
//登录html
function DLH(loginName){
	var dengl = "";
   	dengl+='<tr>';
    dengl+='    <td>您好,'+loginName+' 【<a href="javascript:logout();">退出登录</a>】【<a href="userQ.html">我的组织</a>】&nbsp;<a href="#">帮助</a></td>';
    dengl+='</tr></tbody>';
    return dengl;
}


之后发现此源码并不是很规范,没有严格执行W3C标准,才会出现以上不兼容问题!
更改的地方其实很简单,就是增加 <tbody>

修改后如下:
//登录html
function DLH(loginName){
	var dengl = "";
   	dengl+='<tbody><tr>';
    dengl+='    <td>您好,'+loginName+' 【<a href="javascript:logout();">退出登录</a>】【<a href="userQ.html">我的组织</a>】&nbsp;<a href="#">帮助</a></td>';
    dengl+='</tr></tbody>';
    return dengl;
}


之后经过询问高人,明白了<thead> <tbody> <tfoot>的好处。

总结如下:
<table>
<thead><tr>...</tr></thead>
<tbody><tr>...</tr></tbody>
<tfoot><tr>...</tr></tfoot>
</table>
当然没有必要全都用到,但是必须记住的是如果有thead或tfoot,就必须要tbody。

加了tbody后准确来说并不是影响下载速度,而是呈现速度。

浏览器对Table的解释是等待整个table全部加载完才显示。
如果加入tbody,浏览器则一边下载一边显示已经下载的内容。
分享到:
评论

相关推荐

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    最近发现各大类库都能利用xxx[removed]=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势。

    IE6-IE9中tbody的innerHTML不能赋值的解决方法

    IE6-IE9中tbody的innerHTML不能赋值,重现代码如下 Js代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8/&gt; &lt;title&gt;IE6-IE9中tbody的innerHTML不能复制bug&lt;/title&gt; &lt;/...

    table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法

    table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table...

    JS固定表头和左边列(最新源码)1.9

    注:IE6/7/8锁定表头 由于兼容性问题,有些情况下会有一些错位的问题 1.5 增加了 显示/隐藏功能,修正了非IE浏览器下列宽错位问题 1.6 修正了当有合并单元格时,锁定单元格错位的问题,修正了表格行数较多时...

    bootstrap表格固定表头并且tbody部分添加滚动条

    bootstrap的tbody加竖向滚动条,而且当前表格的表头。bootstrap的tbody加竖向滚动条,而且当前表格的表头。bootstrap的tbody加竖向滚动条,而且当前表格的表头。

    JS固定表头和左边列V2.0(源码)

    注:IE6/7/8锁定表头 由于兼容性问题,有些情况下会有一些错位的问题 1.5 增加了 显示/隐藏功能,修正了非IE浏览器下列宽错位问题 1.6 修正了当有合并单元格时,锁定单元格错位的问题,修正了表格行数较多时的...

    8 table 表格 caption tbody(CSS代码不要给学生,第5章课后练习) .html

    8 table 表格 caption tbody(CSS代码不要给学生,第5章课后练习) .html

    jquery在ie7下选择器的问题导致append失效的解决方法

    复制代码 代码如下: ”right”id&gt; ...&lt;tbody&gt; &lt;/tbody&gt;  ”pendingpage”class&gt;  2,我用jquery动态填充tbody下的内容代码如下 复制代码 代码如下: $(“#pending table tbody”).empty().append(th).app

    CSS设置table下tbody的滚动条的实现

    主要介绍了CSS设置table下tbody的滚动条的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    HTML标签tbody的用法与说明

    tbody 元素应该与 thead 和 tfoot 元素结合起来使用。  表格的分组显示(Structured Table) (IExplore Only) 一、按行分组 &lt;thead&gt; … &lt;/thead&gt; – 表的题头(Header) &lt;tbody&gt; … &lt;/tbody&gt; – 表的正文(Body) ...

    IE bug table元素的innerHTML

    首先时飘忽不定的collapse的border,ie6偏偏有一个地方与其他浏览器表现不同,一条丑陋的border不管怎么样都显示出来。无解。 上面的问题可以用诡异方法解决的话,那接下来就完全没有办法了。 由于涉及到了数据的...

    html中table固定头部表格tbody可上下左右滑动

    当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下: html代码: &lt;th&gt;&lt;div&gt;标题一&lt;/div&gt;&lt;/th&gt; &lt;th&gt;&lt;div&gt;标题二&lt;/div&gt;&lt;/th&gt; &lt;th&gt;&lt;div&gt;标题三&lt;/div&gt;&lt;/th&gt; &lt;th&gt;...

    html tbody 用法

    表格的分组显示(Structured Table) (IExplore Only) 1)按行分组 &lt;thead&gt; ... &lt;/thead&gt; - 表的题头(Header) &lt;tbody&gt; ... &lt;/tbody&gt; - 表的正文(Body) &lt;tfoot&gt; ... &lt;/tfoot&gt; - 表的脚注(Footer) 例: &lt;table&gt; &lt;thead

    tbody元素支持嵌套的注意方法

    tbody元素支持嵌套的注意方法

    用js删除tbody的代码

    runcode 123 123 123 123 123 123 123 123 123 123 ...删除表格的第一个tbody(这个表格只有俩tbody,所以这个按钮只能按两次……) [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

Global site tag (gtag.js) - Google Analytics