( From: http://www.itref.cn/a/css/2010/0706/70.html)
问题描述：
默认情况下，table的单元格td的display为table-cell，在IE给td设置position:relative，然后给它包含的一个容器使用position:absolute进行定位是有效的，但在FF下却不可以。但是在IE下，position:absolute的容器的z-index总是比td的z-index低，td层总是在position:absolute的容器的上面
发生条件：
1. IE6、IE7、IE8和FF浏览器
2. 使用td默认样式，设置td的position:relateve，再给td内的容器设置position:absolute定位
原因分析：
1. 在FF中position:relative要与display:block/inline-block才能生效，display:block/inline-block可以是默认块元素，或是被定义的元素。
2. 而在IE中position:relative除了与display:block/inline-block可以生效外，与display:table-cell、table等都可以
实例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Table单元格内容器定位的兼容性</title>
<style type="text/css">
*{margin:0;padding:0;}
.tb{display:block;width:304px;margin:0 auto;border-collapse:collapse;position:relative;}
.tb td{width:150px;border:1px solid #DDD;position:relative;}
.sub{background-color:#FF0000;width:150px;padding:3px;border:1px solid #FF6600;position:absolute;z-index:9999;left:152px;top:0;}
</style>
</head>
<body>
<h1>可以在IE和FF下看到区别</h1>
<table class="tb">
<tbody>
<tr>
<td rowspan="2"> <wbr></td>
<td> <wbr></td>
</tr>
<tr>
<td> <wbr></td>
</tr>
<tr>
<td class="cell"> <wbr><div class="sub">第二行第一个单元格内的容器</div></td>
<td> <wbr></td>
</tr>
</tbody>
</table>
默认情况下，IE中td的position:relative是有效的;<br />
在FF中td的position:relative是无效的<br />
要在FF中使table的position:relative有效，需要同时设置display:block，而IE不用同时设置display:block
</body>
</html>
新浪网友2011-04-28 11:01:50[回复] [删除] [举报]
我在机器上试了 你这个说的不对，w3c没有对table元素的position：relative进行定义，不管table-cell内部绝对定位的元素是block/ inline-block /inline，都不起作用的。
分享到：
相关推荐
position: relative; left: -100%; } ``` 3. **CSS Grid布局** 虽然CSS Grid通常用于更复杂的网格布局，但它也能轻松合并单元格。通过调整`grid-template-columns`和`grid-template-rows`，可以实现类似表格的...
例如，在IE浏览器中实现行列锁定就需要特别注意CSS的兼容性问题。 **实现原理：** 1. **使用外部div容器：** - 用于显示滚动条。 - 设置为`overflow: scroll`以启用滚动功能。 2. **利用CSS定位：** - `tr` 和...
此外，还需要注意兼容性问题。虽然HTML5和CSS3提供了很多新特性，但不是所有移动端浏览器都完全支持。对于不支持这些特性的老版本浏览器，可能需要使用一些JavaScript库如jQuery Fixed Header Table插件，或者使用...
在网页设计中，数据展示通常会使用到表格（Table）。然而，当表格数据过多时，滚动...在实际项目中，我们还需要考虑到不同浏览器的兼容性问题，可能需要引入额外的库或者使用JavaScript进行增强，以达到更广泛的支持。
标题"div模拟table兼容ie620140424"指出，这是一个关于在2014年时如何使用div元素来模拟table布局，并确保在IE6中达到兼容性的技术问题。描述中提到，目标是实现table的自适应功能，以及表头的列宽与表体列宽保持...
1. 避免将`position`属性应用于`table`元素，而是对内部的单元格（`td`）或行（`tr`）应用。 2. 使用其他布局技术，如Flexbox或Grid，替换传统的表格布局。 3. 使用JavaScript或jQuery监听`select`元素的事件，并在...
在网页设计中，数据展示经常使用到表格（Table），但...在实际项目中，可能还需要考虑兼容性问题、优化性能以及适应不同屏幕尺寸等。你可以参考提供的`demo.html`、`js`和`css`文件，结合本文的指导进行实践和调整。
需要注意的是，不同浏览器可能对CSS和JavaScript的支持程度不同，因此在实际应用中，可能需要进行兼容性测试，确保在各种浏览器环境下都能正确显示。此外，这个示例中的代码没有处理表格的多行滚动情况，如果表格有...
在Web开发中，尤其是涉及到CSS布局时，IE浏览器常常会出现一些特有的...在编写CSS时，应谨慎使用`position`属性，并结合CSS重置以确保跨浏览器兼容性。遇到类似问题时，利用开发者工具进行检查和调试是找出问题的关键。
首先，我们需要明确一点，CSS中的`vertical-align`属性主要用于表格单元格（如`<td>`）和其他内联元素的垂直对齐，而不是用于块级元素如`<div>`的垂直居中。 **一、单行文本垂直居中** 对于只包含一行文本的`<div>`...
3. **兼容性问题**：需要注意的是，示例代码中使用了`expression`表达式，这种方式主要用于IE浏览器下的兼容性问题解决。现代浏览器推荐使用其他方法替代，如JavaScript动态计算等。 #### 三、具体实现步骤 1. **...
因此，选择一种简单易用且兼容性好的方法来实现在图片上添加文字的功能显得尤为重要。 #### 二、实现原理 实现这一功能的主要思路是在HTML中利用表格（`<table>`）或者层叠样式表（CSS）来定位文字的位置。本案例...
这通常涉及到绝对定位和相对定位，以及一些浏览器兼容性的处理。 ```css .fixed-header-table { position: relative; overflow: auto; } table { width: 100%; border-collapse: collapse; } thead { ...
在HTML中，`<table>`的单元格(`<td>`)可以通过`vertical-align: middle;`实现内容垂直居中。这在需要表格布局时非常方便。例如： ```css td { vertical-align: middle; } ``` 然而，这种方法仅限于`<table>...
4. **兼容性调整**：在某些旧版浏览器中，可能会遇到一些兼容性问题。例如，Internet Explorer 8及更低版本不支持`position: fixed`，所以可能需要额外的JavaScript解决方案，如jQuery的`fixedHeaderTable`插件，...
此外，需要通过相对定位（`position: relative`）和绝对定位（`position: absolute`）确保手柄不会影响表格内容。 3. **JavaScript 交互**： 使用JavaScript库，如提供的`mylisttable.js`和`mycommon.js`，可以...
这个话题涉及到CSS中的定位技术，尤其是针对老版本浏览器，如IE6的兼容性处理。本篇将详细介绍如何使用CSS实现一个在滚动时保持固定的表头，同时确保在IE6下正常工作的方案。 首先，问题的核心在于，当表格内容过多...
- `link`: 无兼容性问题。 - `@import`: IE5以上支持。 - **权重**: - `link` 方式的样式的权重通常高于 `@import` 的权重。 #### 实现两列布局 - **代码示例**: ```html <!DOCTYPE html> .container {...
可以考虑使用`<table>`代替`<div>`来解决兼容性问题。 ##### 3. 使用absolute+transform **原理与用法**：通过绝对定位结合`transform: translateX(-50%);`实现水平居中。 **代码示例**： ```html ...
### GRIDVIEW实现EXCEL列冻结功能 ...需要注意的是，实现过程中需要考虑兼容性和性能问题，特别是在处理大量数据时。此外，为了更好地用户体验，还可以考虑增加一些额外的功能，如拖拽调整冻结列的位置等。