打印

HE1004: IE8(S) Firefox Chrome Safari 不再支持 COL 及 COLGROUP 元素的部分属性及为其设定的 CSS 特性

作者:段立新

标准参考

COLGROUP 元素指定表格中一列或一组列的默认属性。

COL 指定基于列的表格默认属性。

关于 COLGROUP 元素和 COL 的详细信息,参见 HTML 4.01 中说明:11.2.4 Column groups: the COLGROUP and COL elements

问题描述

IE6 IE7 IE8(Q) 对 COL 和 COLGROUP 元素的属性及部分 CSS 特性支持较好,而IE8(S) Firefox Chrome Safari 不再支持 COL 及 COLGROUP 元素的部分属性及为其设定的 CSS 特性。

造成的影响

使用 COL 和 COLGROUP 元素的属性及部分 CSS 特性,在所有浏览器下可能有不同的效果。

受影响的浏览器

所有浏览器  

问题分析

定义 COLGROUP 元素,并为其设置各种属性以及 CSS 样式,代码如下:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<table border="1"  width="2500" height="500">
<colgroup span="2" style="background:pink;"></colgroup>
<colgroup width="200"></colgroup>
<colgroup style="color:blue;"></colgroup>
<colgroup style="width:200px;"></colgroup>
<colgroup align="left"></colgroup>
<colgroup align="center" style="text-decoration:underline;"></colgroup>
<colgroup align="right" style="font-size:20px;font-family:Courier New"></colgroup>
<colgroup align="justify" style="cursor:pointer"></colgroup>
<colgroup valign="top"></colgroup>
<colgroup valign="middle"></colgroup>
<colgroup valign="bottom" style="padding:20px;"></colgroup>
<colgroup valign="baseline"></colgroup>
<tr>
<td>span="2"</td>
<td>span="2"</td>
<td>width="200"</td>
<td>color:blue;</td>
<td>width:200px</td>
<td>align="left"</td>
<td>align="center"</td>
<td>align="right"</td>
<td>align="justify"</td>
<td>valign="top"</td>
<td>valign="middle"</td>
<td>valign="bottom"</td>
<td>valign="baseline"</td>
</tr>
<tr>
<td>span="2"</td>
<td>span="2"</td>
<td>width="200"</td>
<td>color:blue;</td>
<td>width:200px</td>
<td>align="left"</td>
<td>align="center"</td>
<td>align="right"</td>
<td>align="justify"</td>
<td>valign="top"</td>
<td>valign="middle"</td>
<td>valign="bottom"</td>
<td>valign="baseline"</td>
</tr>
</table>
</body>
</html>

定义 COL 元素,并为其设置各种属性以及 CSS 样式,代码如下:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<table border="1" width="2500" height="500">
<col span="2" style="background:pink;">
<col width="200">
<col style="color:blue;">
<col style="width:200px;">
<col align="left" >
<col align="center" style="text-decoration:underline;">
<col align="right" style="font-size:20px;font-family:Courier New">
<col align="justify" style="cursor:pointer">
<col valign="top">
<col valign="middle">
<col valign="bottom" style="padding:20px;">
<col valign="baseline" >
<tr>
<td>span="2"</td>
<td>span="2"</td>
<td>width="200"</td>
<td>color:blue;</td>
<td>width:200px</td>
<td>align="left"</td>
<td>align="center"</td>
<td>align="right"</td>
<td>align="justify"</td>
<td>valign="top"</td>
<td>valign="middle"</td>
<td>valign="bottom"</td>
<td>valign="baseline"</td>
</tr>
<tr>
<td>span="2"</td>
<td>span="2"</td>
<td>width="200"</td>
<td>color:blue;</td>
<td>width:200px</td>
<td>align="left"</td>
<td>align="center"</td>
<td>align="right"</td>
<td>align="justify"</td>
<td>valign="top"</td>
<td>valign="middle"</td>
<td>valign="bottom"</td>
<td>valign="baseline"</td>
</tr>
</table>
</body>
</html>

由于截图较大,这里不给出各浏览器截图,结论如下:

  IE6 IE7 IE8(Q) Opera IE8(S) Firefox Chrome Safari
span 属性 yes yes yes yes
width 属性 yes yes yes yes
align 属性 yes yes no no
valign 属性 yes yes yes no
CSS 特性 color yes no no no
CSS 特性 width yes yes yes yes
CSS 特性 background yes yes yes yes
CSS 特性 text-decoration yes no no no
CSS 特性 font-size font-family yes no no no
CSS 特性 cursor yes no no no
CSS 特性 padding yes no no no

解决方案

当使用 COLGROUP COL 时需注意各浏览器对属性及 CSS 样式的设置,避免造成兼容性问题。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.10
Chrome 7.0.552.0 dev
Safari 5.0.2
Opera 10.63
测试页面: colgroup.html
col.html
本文更新时间: 2010-10-19

关键字

COLGROUP COL