注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

★柳暗花明★

似水年华,诠释着无力的永恒······

 
 
 

日志

 
 

IE6 IE7 IE8(Q) Firefox(Q) Opera(Q) 中空单元格的边框某些情况下会消失  

2010-09-21 09:55:31|  分类: Html经典 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

问题描述

IE6 IE7 IE8(Q) Firefox(Q) Opera(Q) 中空单元格的边框某些情况下会消失。

造成的影响

IE6 IE7 IE8(Q) Firefox(Q) Opera(Q) 中的这种现象可能导致表格中空单元格的边框甚至是其所占空间,而与其他浏览器出现差异。

受影响的浏览器

IE6 IE7 IE8(Q) Firefox(Q) Opera(Q)  

问题分析

分析以下代码:

<style>
table { border:5px solid #555; }
td { background:#CCC; }
.tb td { border:5px solid #999; }
</style>
<table class="tb" cellpadding="0" cellspacing="5">
<tr>
<td id="td"></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<script>
document.write(document.getElementById("td").offsetHeight);
</script>

上面代码中,创建了一个 TABLE 元素,包含两行一列,其中第一行中的 TD 元素是一个空单元格,第二行的包含“&nbsp;”。TD 元素设置了边框。最后通过 JavaScript 代码获取第一行的空单元格TD元素的实际高度。

在各浏览器中的运行效果如下:

IE6(Q) IE7(Q) IE8(Q) IE6(S) IE7(S) Firefox(Q) Opera(Q) IE8(S) Firefox(S) Opera(S) Chrome Safari
IE6(Q) IE7(Q) IE8(Q) IE6(S) IE7(S) Firefox(Q) Opera(Q) IE8(S) Firefox(S) Opera(S) Chrome Safari

 第一行中的 TD 元素为空单元格,内容宽度和高度均为 0,由于每个方向设置了 5px 的边框,所以其实际高度为 10px。可以看到,

  • IE6(Q) IE7(Q) IE8(Q) 中,空单元格(empty cell)的边框会消失,但是其所占据的空间仍然存在,高度仍然为 10px;
  • IE6(S) IE7(S) 中,空单元格的边框消失,但是其所占据的空间发生了变化,高度变为了 1px;
  • Firefox(Q) Opera(Q) 中,空单元格的边框消失,其所占空间也没有变化,但是与 IE(Q) 中不同的是,原 border 应该占据的空间渲染上了 TD 元素设置的背景;
  • IE8(S) Firefox(S) Opera(S) Chrome Safari 中,空单元格的边框正常显示,符合 W3C 规范。

解决方案

避免出现空单元格,使用 “&nbsp;” 代替空单元格。

  评论这张
 
阅读(911)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017