基本兼容FireFox和IE的固定表头CSS

2008-05-23 17:51:00 | , , ,

 

在前面的文章中，我介绍了如何是使用CSS在IE中实现固定表头的实现，但是在FF中却不能实现这个功能，主要是FF不支持在CSS中使用expression，今天在整理兼容的时候，我顺便测试了以下，经过修改CSS，在IE下面可以完全实现，但是FF只能部分实现，等待达人点解了。

在测试过程中，又一次的碰到了rowspan在position:relative下的解析错误问题，从网上找了很多资料，都无法解决，继续郁闷中。

本次的修改使用的技术为CSS Hack，这个在很多站点有介绍，我使用最简单的CSSHack技术，就是

在CSS中如果存在FF和IE不一致的地方，先写FF的CSS，然后使用*Hack编写对应的IE的CSS，这样在IE下则自动取得后面的CSS，而在FF下则认为*开头的CSS无效。

 image

这里显示的就是FF的提示信息。虽然有警告，但是我们的目的达到了，呵呵，要的就是这个效果。

OK，先放出正式的CSS 

   1: div.c{background-color:white;overflow:auto;width:100%;*height:100%;border:solid 2px red;}

   2: table.t{width:100%}

   3: table.t tbody{height:300px;overflow-y:auto;overflow-x:hidden;*height:auto;*overflow:hidden;}

   4: table.t tbody td{background-color:white;}

   5: table.t thead tr{position:relative;top:*expression(this.offsetParent.scrollTop-2);}    

   6: table.t thead td{position:relative;background-color:#ccc;font-weight:bold;}

解说一下：

在IE下面的原理可以参考我前面的文章，我只说在FF下的原理

在FF下将TBody设置成overflow:auto，这里存在一个问题,TBody设置了overflow-x并不会产生横向滚动条，不知道为什么哦。

在FF下可不用设置DIv.C的属性，因为会自动延伸，而必须设置Tbody的高度，否则不会产生效果，而且最郁闷的是，必须设置绝对的像素值。

在FF下显示的效果如下

image

注意，地下的那个横向滚动条实际是DIV的，而不是Table的，为了方便参考，我贴出IE的图片

image

看出滚动条的差别了没有？右下角看看滚动条是如何衔接的？

BTW：上图存在的COl4跨行错误就是我所说的IE的rowspan错误。

以下为几个有用的链接：

http://cross-browser.com/x/examples/xtable.html

http://www.stansight.com/sort/LockTableHeadSort.html

但是都不是很完美，直接使用JS实现，则显得过于唐突，所以不使用这些站点提供的代码

看了又看，有人比我讲解的更加详细

http://birdshome.cnblogs.com/archive/2006/05/01/ScrollTable.html

http://www.cnblogs.com/birdshome/archive/2006/05/13/ScrollTableDetails.html

Comments (5) -

老大 :

蛮好，但是在IE下，定义了DTD居然不工作？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/.../xhtml1-transitional.dtd">;
<html>
<head>
<style>
div.c{background-color:white;overflow:auto;width:100%;*height:100%;border:solid 2px red;}
table.t{width:100%}
table.t tbody{height:200px;overflow-y:auto;overflow-x:hidden;*height:auto;*overflow:hidden;}
table.t tbody td{background-color:white;}
table.t thead tr{position:relative;top:*expression(this.offsetParent.scrollTop-2);}    
table.t thead td{position:relative;background-color:#ccc;font-weight:bold;}
</style>
</head>

<body>
<div class="c">
<table class="t">
<thead>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
</thead>
<tbody>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>
<tr><td>head1</td><td>head1</td><td>head1</td><td>head1</td></tr>

</tbody>
</table>
</div>
</body>
</html>

FF下没有什么问题，起码不用JS,很好，打算跟www.stansight.com/sort/LockTableHeadSort.html 这个结合一下，不知可否再有新的方案？

# 2008-09-17 14:52:14
老大 :

OH,OK
DIV也要设个高度？

# 2008-09-17 15:05:45
沈胜衣 :

DIV不设置高度的时候使用的是Auto模式，可能会产生错位，这个在FF下有些问题

# 2008-09-18 11:09:03
沈胜衣 :

PS：可以使用Style="Clear:xxxx"避免这种错位

# 2008-09-18 11:09:30
flyingnn :

以上几个方法，在FF3下OK，FF6不行。

# 2011-09-02 15:46:38

Add comment




biuquote
  • Comment
  • Preview
Loading