web标准下FF与IE对表格边框和宽度的不同解析测试

最新推荐文章于 2024-06-13 14:36:30 发布
最新推荐文章于 2024-06-13 14:36:30 发布
阅读量72 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/color-fever/archive/2008/10/13/1310147.html
版权

<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <p style="font-weight:bold;">--table--</p> <p>separate，表格边框包含在 width 中。</p> <table cellspacing="0" cellpadding="0" style="width:100px;border:10px solid red;border-collapse:separate;"> <tr> <td> </td> </tr> </table> <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <tr> <td style="width:100px;background-color:#999900;color:white;text-align:center;">100px</td> </tr> </table> <p>collapse，表格边框被平均分为“内边框”、“外边框”，“内边框”包含在 width 中，“外边框”不包含在 width 中，“外边框”不占 空间。</p> <table cellspacing="0" cellpadding="0" style="width:100px;border:10px solid red;border-collapse:collapse;"> <tr> <td> </td> </tr> </table> <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <tr> <td style="width:5px;background-color:#009900;"></td> <td style="width:90px;background-color:#999900;color:white;text-align:center;">90px</td> <td style="width:5px;background-color:#009900;"></td> </tr> </table> <p>collapse，当边框无法平均分为两份时，左边框的“外边框”等于“内边框”加 1，右边框则相反。</p> <table cellspacing="0" cellpadding="0" style="width:100px;border:1px solid red;border-collapse:collapse;"> <tr> <td> </td> </tr> </table> <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <tr> <td style="width:0px;background-color:#009900;"></td> <td style="width:99px;background-color:#999900;color:white;text-align:center;">99px</td> <td style="width:1px;background-color:#009900;"></td> </tr> </table> <p style="font-weight:bold;">--td--</p> <p>collapse，未指定 table 宽度时，td 的边框不占用 td 的 width。</p> <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <tr> <td style="width:100px;border:1px solid red;"> </td> <td style="width:100px;border:1px solid red;"> </td> </tr> </table> <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <tr> <td style="width:100px;background-color:#999900;color:white;text-align:center;">100px</td> <td style="width:1px;background-color:#009900;"></td> <td style="width:100px;background-color:#999900;color:white;text-align:center;">100px</td> </tr> </table> <p>collapse，指定 table 宽度时，td 边框的解释同 table。</p> <table cellspacing="0" cellpadding="0" style="width:200px;border-collapse:collapse;"> <tr> <td style="width:100px;border:1px solid red;"> </td> <td style="width:100px;border:1px solid red;"> </td> </tr> </table> <table cellspacing="0" cellpadding="0" style="border-collapse:collapse;"> <tr> <td style="width:99px;background-color:#999900;color:white;text-align:center;">99px</td> <td style="width:1px;background-color:#009900;"></td> <td style="width:99px;background-color:#999900;color:white;text-align:center;">99px</td> <td style="width:1px;background-color:#009900;"></td> </tr> </table> </body> </html>
  [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

注意：本实例主要适用于FF。

*table 与 td 边框重叠问题*

在样式表中同时为table标签和td标签指定边框，边框是否重叠取决于border-collapse属性。例如：

ContractedBlock.gif ExpandedBlockStart.gif Code
<table>
  <tr>
    <td>
    
<table style="border:1px solid red;">
  <tr>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
  </tr>
</table>
    
    </td>
    <td>
    
<table style="border:1px solid red;border-collapse:collapse;">
  <tr>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
  </tr>
</table>
    
    </td>
  </tr>
</table>

 

FF 结果如下：

table 与 td 边框重叠问题

  • 左边是未指定 border-collapse 的（默认为 separate）。
  • 右边是指定了 border-collapse 为 collapse 的。

IE 结果如下：

IE 中 table 与 td 边框重叠问题

  • 左边是未指定 border-collapse 的（默认为 separate）。
  • 右边是指定了 border-collapse 为 collapse 的。

兼容性

可以看出在发生重叠时，Firefox 是用 td 覆盖 table 的，而 IE 是用 table 覆盖 td 的。

转载于:https://www.cnblogs.com/color-fever/archive/2008/10/13/1310147.html

weixin_30492601
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 5927
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
IE和FF在对js支持的不同(整理)及解决方法
09-25
JavaScript在不同的浏览器上可能存在兼容性问题，尤其是在Internet Explorer (IE)和Firefox (FF)之间。以下是一些常见的差异和相应的解决方法： 1. **window.event** - 在IE中，`window.event`对象包含了当前事件...
table设置td宽度的浏览器差异
yxc_gdut的博客
02-20 546
先看看浏览器生成table差别。   &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;table.html&lt;/title&gt; &lt;meta http-equiv="content-type" content="text/html; charset=GB18030&quo
Web前端·简单粗暴的固定table表格宽度
weixin_42681158的博客
09-14 1万+
table表格单元格的宽度是个很玄学的东西 width固定的宽度总是不靠谱 特别是跨行或者夸列合并单元格之后 绝对不是一个width能驾驭了 参考诸多方法之后 想到了一个简单粗暴的方法 简单来说就是 首行隐藏、固定宽度 下面我们来看代码 html部分 &lt;table&gt; &lt;!--第一组tr是用来固定宽度的，里面的td赋类名hide，稍后会隐藏--&gt; ...
web初探-css-设置表格样式
大碗宽面的博客
08-04 1780
设置表格的边框 Border：设置表格边框； Border-collapse：设置边框分离，合并 默认是 separate(分离) collapse 合并； Border-spacing ：设置单元格的间距； Padding：设置单元格内容和边框之间的距离； 设置表格的宽度 Table-layout 默认 auto 自动方式，根据单元格的内容自动调整宽度； Fixed 固定方式 表格宽度固定 设置...
部分IE下bug解决方法和兼容IE,FF方法
tangjianft的专栏
12-13 666
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 3.浮动ie产生的双倍距离 #bo
总结CSS对IE与FF兼容性的经验
fyqcdbdx的专栏
12-05 484
IIE与FF兼容性是网页设计要经常考虑的问题. 这里从网上收集了IE7,6与Fireofx的兼容性处理技巧，对于web2.0的过渡，请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处理，作为W3C的标准，一定要加 DOCTYPE声明。 　　CSS技巧 　　1、浮动ie产生的双倍距离 　　以下为引用内容： 　　#box{ float:left; width:100px; ma
引用 js在IE与FF之间的区别详细解析
01-19
☆IE8自带的developerbar也很不错 ☆打开firefox所有js警告:在地址栏里录入:about:config双击,设置javascriptoptionrestict打开为true能够看到很多警告,利于纠错 ☆IE->firefoxjavascript类 △document.all(“id”)-...
IE7与FF下的letter-spacing属性兼容性写法
09-25
letter-spacing:控制单个字符或者文字的间距，下面要与大家分享的是IE7与FF下的letter-spacing属性兼容性解决方法，有此疑问的朋友可以参考下
Jquery 复选框取值兼容FF和IE8(测试有效)
01-21
插件版本：jquery-1.6.min.js 代码如下: var chk_value=””; $(‘input[name=”rootMenu”]’).each(function () { if (this.checked) { chk_value += this.value + “$”; } }); alert(chk_value)...
带border的响应式布局
ITBwy的博客
09-23 858
击败边框：带border的百分比布局   (2013-12-03 14:00:06) 转载▼   分类： html,css 响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每一列以及总宽度都采用百分比设置，那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题，你
[IE兼容性] Table 之边框
热门推荐
oscar999的专栏
12-05 1万+
table 是HTML 中常用的标签。 但是在IE 8 以下的浏览器中会出现边框丢失的状况
IE8下部分表格边框不显示
xiaokun
11-14 890
在IE8浏览器下[code="java"] [/code],如果table中使用属性：border='1'则会导致部分表格边框不显示的问题，解决办法是去掉该属性，采用CSS方式配置。
css引入方式有几种？link和@import有什么区别？
tianxianghuiwei的博客
06-13 476
link>标签和@import规则。<link>这种方式是在HTML文档的<head>部分或者XHTML文档的<head>或<body>部分添加<link>标签，通过href属性指定外部样式表的URL。<link>标签会在页面加载时同时加载并解析外部样式表，从而使得样式可以立即生效。@import@import规则是在CSS文件中使用的一种方式，用于引入外部样式表。它需要写在CSS文件的顶部（除了可能的@charset声明），并且只能引入一次。@import规则相对于<link>
2014-2023年的绿色债券数据.txt
最新发布
07-06
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。样例数据及详细介绍参见文章：https://blog.csdn.net/samLi0620/article/details/140227523
综合素质笔记2024上半年笔记
07-05
综合素质笔记2024上半年笔记
使用javascript调用webservice示例[借鉴].pdf
10-14
为了确保代码的正确性，我们可以在IE6和Firefox（FF）浏览器上进行测试。在测试过程中，可以通过浏览器的开发工具来查看请求和返回的数据，以便排查问题。 ## 结论 通过本文的示例代码和测试方法，我们可以成功地...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值