来一个例子:代码很简单,如下:
复制代码代码如下: <table border=”1″> <tr> <td>dd</td> <td>dds</td> </tr> <tr> <td>ss</td> <td>sss</td> </tr> </table>
如此,一个表格,有两行两列,在任何浏览器下都没有任何显示错误.但是如果我加下面这句css,情况就不同了:
复制代码代码如下: <style> tr{position: relative;} </style>
看来是要出问题了,可是别着急,其实这个时候从表面上你看不到任何问题,页面布局绝对不会乱掉, 你看不到任何东西会重叠起来.
我可从来
在网页设计中，CSS（层叠样式表）的使用至关重要，它可以精确地控制网页元素的样式和布局。本文讨论的问题涉及到一个与表格（table）和定位（position）相关的CSS Bug，尤其是在IE浏览器中的表现。标题“折叠的table行元素bug”暗示了在应用特定CSS规则后，表格的行元素（tr）可能会出现意想不到的行为。
来看一个简单的HTML表格代码：
```html
<table border="1">
<tr>
<td>dd</td>
<td>dds</td>
</tr>
<tr>
<td>ss</td>
<td>sss</td>
</tr>
</table>
```
这个表格在所有浏览器下都能正常显示，没有问题。然而，当添加以下CSS规则：
```css
<style>
tr {
position: relative;
}
</style>
```
即使表面上看起来一切正常，但实际上，问题已经潜伏。在IE开发者工具中，我们可以发现两个表格行（tr）元素的位置出现了重叠，尽管它们的视觉样式没有变化。这是因为`position: relative;`使表格行元素产生了定位上下文，但表格元素（table）本身并不支持定位，导致行元素的相对位置计算出现问题。
通常，`position: relative;`用于创建相对于元素原有位置的定位。在这个例子中，由于表格行（tr）的定位属性被设置，使得它们在文档流中产生了预期之外的偏移，尽管这些偏移并没有改变实际的布局。然而，当与其他CSS规则结合使用，比如绝对定位（absolute）或者相对其他定位元素时，这种隐藏的偏移可能引发问题，如在案例中提到的标题栏无法点击和拖动。
为了避免这类问题，应该谨慎使用全局的`position: relative;`，特别是对表格元素。如果需要为元素设置定位，最好是根据需要单独指定，而不是批量应用。此外，使用CSS重置（reset）可以确保浏览器的样式一致性，避免默认样式带来的不兼容性。例如：
```css
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 12px;
vertical-align: baseline;
background: transparent;
}
/* 更多其他重置样式... */
```
但值得注意的是，这样的全局重置也可能带来其他潜在问题，因为某些元素的默认样式对于用户体验至关重要。因此，建议使用更精确的重置方法，如Eric Meyer Reset或Normalize.css。
理解CSS的定位机制和浏览器的渲染差异是解决此类问题的关键。在处理表格布局时，应谨慎使用定位属性，尤其是当涉及到表格元素时，因为它们的布局特性与普通元素有所不同。对于复杂的定位需求，使用`position: absolute;`和`position: fixed;`时，确保其父元素具有适当的定位属性，以便正确地定位子元素。遵循良好的编码习惯和对各种浏览器行为的理解，可以避免许多不必要的CSS Bug。
