`

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,浏览器则一边下载一边显示已经下载的内容。
分享到:
评论

相关推荐

    jquery appen table 问题 ie8下解决方法

    - IE8的DOM操作限制:IE8并不完全支持W3C标准,特别是关于动态创建和修改DOM元素的部分。这可能使`append()`在某些场景下表现不一致。 - 表格元素的插入规则:在HTML中,`&lt;tr&gt;`元素必须直接位于`&lt;tbody&gt;`内,而`...

    Firefox和IE兼容参考

    - 对于表格元素,如`&lt;thead&gt;`、`&lt;tfoot&gt;`和`&lt;tbody&gt;`,IE可能处理方式不同,可能导致布局问题。 2. **CSS 兼容性** - 浏览器对CSS前缀的支持不一致,如 `-webkit-`、`-moz-`、`-ms-`、`-o-`,Firefox需要`-moz-`...

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

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

    IE创建动态表格注意事项

    本主题将深入探讨“IE创建动态表格注意事项”,结合提供的博文链接(已无法访问,但通常这类文章会讨论IE浏览器特有的兼容性问题以及解决策略)以及文件“userinfo.html”和“mootools.js”,我们可以推断出以下知识...

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

    在IE6到IE9这四个版本的Internet Explorer浏览器中,存在一个与DOM操作相关的兼容性问题,即不能直接通过`innerHTML`属性来设置`&lt;tbody&gt;`元素的内容。这个问题主要是由于这些旧版本的IE浏览器对HTML标准的支持不完整...

    一个兼容IE、Chrome和Firfox的HTML固定表头例子

    这个示例兼容了三种主流浏览器:Internet Explorer(IE)、Google Chrome和Mozilla Firefox,这涵盖了大部分用户的浏览器环境。 在描述中提到的“博文链接:https://sheng.iteye.com/blog/1199433”,这是一个IT...

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

    Bootstrap表格在设计网页时是一种非常常用的组件,尤其在处理大量数据时,为了提供更好的用户体验,我们经常需要在tbody部分添加竖向滚动条,同时保持表头固定不动。这样,当用户滚动内容时,表头始终保持可见,便于...

    w3c组织给出html4的样式建议

    然而,遗憾的是,各个浏览器厂商为了实现自有的特性和增强用户体验,往往会添加自己的私有属性,这导致了对W3C标准的偏离,也就是所谓的“浏览器大战”。 尽管如此,W3C的HTML4样式建议仍然具有很高的参考价值。...

    div模拟table滚动时表头固定,兼容ie6

    4. **兼容性处理**:对于IE6,由于其对CSS和JavaScript的支持有限,可能需要额外的技巧。例如,使用`expression`属性来动态计算宽度,或者使用JavaScript库如jQuery来增强兼容性。 5. **响应式设计**:考虑不同屏幕...

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

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

    JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐) .zip

    对于IE6和IE7,我们可以使用ActiveXObject。 ```javascript var xhr = new XMLHttpRequest(); if (!xhr) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } ``` 2. **打开请求并设置响应类型**: 接下来,我们...

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

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

    w3cschool菜鸟教程(html)

    9. **表格高级特性**:如合并单元格(`colspan`和`rowspan`属性),表格边框(`border`属性),以及表头组`&lt;thead&gt;`、表体`&lt;tbody&gt;`和表脚`&lt;tfoot&gt;`。 10. **框架**:`&lt;frameset&gt;`和`&lt;frame&gt;`元素可以创建网页框架...

    兼容浏览器的table行列锁定

    为了解决这个问题,"兼容浏览器的table行列锁定"技术应运而生。这种技术允许用户在滚动表格时,保持特定的行或列始终可见,提高用户的浏览体验。 首先,我们需要理解“行列锁定”的概念。行锁定(Row Locking)指的...

Global site tag (gtag.js) - Google Analytics