FireFox下GridView表格线显示、隐藏的问题 _gridcontrol不显示网格线-CSDN博客

本文介绍了一个关于GridView在Firefox浏览器下显示额外表格线的问题及其解决方案。通过调整GridView的GridLines属性，使IE和Firefox显示效果一致。

搞了快一个小时，IE7显示下一切正常，但是在FF下，就会显示表格线。
表格是GridView 自动生成的代码，除了设置自定义样式外，没有添加任何样式。

附代码：

< asp:GridView ID ="gvUserList" runat ="server" Width ="100%" AllowPaging ="true" PageSize ="10" OnPageIndexChanging ="gvUserList_PageIndexChanging" GridLines ="None" >
2

< Columns >
3

< asp:BoundField HeaderText ="用户名" DataField ="UserName" >
5

< ItemStyle Width ="90px" />
6

</ asp:BoundField >
7

< asp:BoundField HeaderText ="电子邮箱" DataField ="Email" >
8

< ItemStyle Width ="100px" />
9

</ asp:BoundField >
10

< asp:BoundField HeaderText ="锁定状态" DataField ="IsLocked" >
11

< ItemStyle Width ="60px" />
12

</ asp:BoundField >
13

< asp:BoundField HeaderText ="上次登陆时间" DataField ="LastLoginDate" >
14

< ItemStyle Width ="120px" />
15

</ asp:BoundField >
16

< asp:BoundField HeaderText ="注册时间" DataField ="AddDate" >
17

< ItemStyle Width ="120px" />
18

</ asp:BoundField >
19

< asp:BoundField HeaderText ="添加人" DataField ="Creator" >
20

< ItemStyle Width ="90px" />
21

</ asp:BoundField >
22

< asp:TemplateField HeaderText ="操作" >
23

< ItemTemplate >
24

< asp:LinkButton ID ="lbtnEdit" CssClass ="red" ToolTip ="修改该用户的注册信息" runat ="server" CommandArgument ='<%#Eval("UserName")% > '
25

OnCommand="lbtnEdit_OnCommand" Text="编辑"> </ asp:LinkButton >
26

< asp:LinkButton ID ="lbtnLock" CssClass ="red" ToolTip ="锁定该用户" runat ="server" CommandArgument ='<%#Eval("UserName")% > '
27

OnCommand="lbtnLock_OnCommand" Text="锁定"> </ asp:LinkButton >
28

< asp:LinkButton ID ="lbtnDelete" CssClass ="red" ToolTip ="删除该用户" runat ="server" CommandArgument ='<%#Eval("UserName")% > '
29

OnCommand="lbtnDelete_OnCommand" Text="删除"> </ asp:LinkButton >
30

</ ItemTemplate >
31

< ItemStyle Width ="100px" />
32

</ asp:TemplateField >
33

</ Columns >
34

< PagerStyle CssClass ="pager" />
35

</ asp:GridView >

对应的样式在.skn文件中设置，如：

< asp:GridView CssClass ="tab" runat ="server" RowStyle-CssClass ="row"

AlternatingRowStyle-CssClass ="alterRow" HeaderStyle-CssClass ="header" AutoGenerateColumns ="false" >

</ asp:GridView >

郁闷的问题也随之产生，下面分别为IE和FireFox下显示图：
IE:

FireFox：

很明显同样的代码在FF下却多了几条线，在追求“和谐社会”的今天，决不能容许这些不合谐的事情出现，
查看HTML源代码：

< table class ="tab" cellspacing ="0" rules ="all" border ="1" id ="UserList1_gvUserList" style ="width:100%;border-collapse:collapse;" >
2

< tr class ="header" >
3

< th scope ="col" > 用户名 </ th >< th scope ="col" > 电子邮箱 </ th >< th scope ="col" > 锁定状态 </ th >< th scope ="col" > 上次登陆时间 </ th >< th scope ="col" > 注册时间 </ th >< th scope ="col" > 添加人 </ th >< th scope ="col" > 操作 </ th >
4

</ tr >< tr class ="row" >
6

< td style ="width:90px;" > admin </ td >< td style ="width:100px;" > fgyl@21cn.com </ td >< td style ="width:60px;" > True </ td >< td style ="width:120px;" > 2007-6-7 10:48:46 </ td >< td style ="width:120px;" > 2007-5-31 11:57:19 </ td >< td style ="width:90px;" > superAdmin </ td >< td style ="width:100px;" >
7

< a id ="UserList1_gvUserList_ctl02_lbtnEdit" title ="修改该用户的注册信息" class ="red" href ="javascript:__doPostBack('UserList1$gvUserList$ctl02$lbtnEdit','')" > 编辑 </ a >
8

< a id ="UserList1_gvUserList_ctl02_lbtnLock" title ="锁定该用户" class ="red" href ="javascript:__doPostBack('UserList1$gvUserList$ctl02$lbtnLock','')" > 锁定 </ a >
9

< a id ="UserList1_gvUserList_ctl02_lbtnDelete" title ="删除该用户" class ="red" href ="javascript:__doPostBack('UserList1$gvUserList$ctl02$lbtnDelete','')" > 删除 </ a >
10

</ td >
12

</ tr >< tr class ="alterRow" >
13

< td style ="width:90px;" > 风中吹过的叶子 </ td >< td style ="width:100px;" > otherfame@163.com </ td >< td style ="width:60px;" > False </ td >< td style ="width:120px;" > 2007-6-7 11:20:15 </ td >< td style ="width:120px;" > 2007-6-7 11:20:15 </ td >< td style ="width:90px;" > superAdmin </ td >< td style ="width:100px;" >
14

< a id ="UserList1_gvUserList_ctl03_lbtnEdit" title ="修改该用户的注册信息" class ="red" href ="javascript:__doPostBack('UserList1$gvUserList$ctl03$lbtnEdit','')" > 编辑 </ a >
15

< a id ="UserList1_gvUserList_ctl03_lbtnLock" title ="锁定该用户" class ="red" href ="javascript:__doPostBack('UserList1$gvUserList$ctl03$lbtnLock','')" > 锁定 </ a >
16

< a id ="UserList1_gvUserList_ctl03_lbtnDelete" title ="删除该用户" class ="red" href ="javascript:__doPostBack('UserList1$gvUserList$ctl03$lbtnDelete','')" > 删除 </ a >
18

</ td >
19

</ tr >< tr class ="row" >
20

< td style ="width:90px;" > 洗不掉的血 </ td >< td style ="width:100px;" > okgogo@163.com </ td >< td style ="width:60px;" > False </ td >< td style ="width:120px;" > 2007-6-7 11:24:01 </ td >< td style ="width:120px;" > 2007-6-7 11:24:01 </ td >< td style ="width:90px;" > superAdmin </ td >< td style ="width:100px;" >
21

< a id ="UserList1_gvUserList_ctl04_lbtnEdit" title ="修改该用户的注册信息" class ="red" href ="javascript:__doPostBack('UserList1$gvUserList$ctl04$lbtnEdit','')" > 编辑 </ a >
22

< a id ="UserList1_gvUserList_ctl04_lbtnLock" title ="锁定该用户" class ="red" href ="javascript:__doPostBack('UserList1$gvUserList$ctl04$lbtnLock','')" > 锁定 </ a >
24

< a id ="UserList1_gvUserList_ctl04_lbtnDelete" title ="删除该用户" class ="red" href ="javascript:__doPostBack('UserList1$gvUserList$ctl04$lbtnDelete','')" > 删除 </ a >
25

</ td >
26

</ tr >
27

</ table >

注意上面的“rules='all' "这个属性，查找Baidu，发现此属性有四个值可以设置“all,none,rows,cols”，分别的显示所有的边线、不显示边线、只显示行线和只显示列线。找到原因就好办事了，拿它开刀，查找GridView属性，发现其有GridLines属性，默认为“Both”,产生Html后的代码就会增加rules="all"属性，显示，将其设置为"none",再次查看发现一切正常，而Html代码中rules属性也变成“none”，ok,IE和 FF终于达成一致，外国鸟人做个东西这么
不厚道,不过话又说回来，谁让咱自己人没本事呢。用别人的就别挑了。唉~~~

原文：http://www.cnblogs.com/otherfame/archive/2007/06/20/790143.html