FireFox下GridView表格线显示、隐藏的问题

以下是转载:

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

附代码:

1<asp:GridView ID="gvUserList" runat="server" Width="100%" AllowPaging="true" PageSize="10" OnPageIndexChanging="gvUserList_PageIndexChanging" GridLines="None">
2    <Columns>
3   
4        <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源代码:

1<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
5        </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
11            </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
17                <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
23                <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终于达成一致,外国鸟人做个东西这么
不厚道,不过话又说回来,谁让咱自己人没本事呢。用别人的就别挑了。唉~~~

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/skyaspnet/archive/2008/07/26/2714129.aspx

      我在做新闻发布系统中也出现了这个问题,而且Firefox和IE一样都不显示网格线。css+div+直接窗体属性调试,试着调了好久也没有调试成功。以下是它们顽固的显示状况:

Friefox(就比IE多了一个外边框(⊙o⊙)…)

clip_image001

IE(对外边框的设置都不识别%>_<%)

clip_image002

     问题搁置,以后解决。。。好再不是什么大问题,不影响整个系统的进行。。。

posted @ 2011-06-06 21:43  CharmingDang  阅读(134)  评论(0编辑  收藏  举报