GridView在生成HTML代碼的時候會自動加上style="border-collapse:collapse;"以及border=1,rules="all"這些屬性,這些在IE下都沒什么影響,但是在FF下就會影響顯示,style="border-collapse:collapse;";是由於設置了CellSpacing="0"產生的,當設置CellSpacing="1"后就沒有,可以去掉style="border-collapse:collapse;";默認情況下CellSpacing="0",所以默認情況下會有style="border-collapse:collapse;"這個屬性生成。GridLines="Both"會帶來border=1,rules=all這兩個屬性,設置GridLines="None"后border=0,rules屬性則不會出現。
MS默認的GridView生成HTML代碼的方式本身就沒有去兼容各種瀏覽器,只是特別照顧了自己的IE,其實MS已經給出了解決辦法,那就是自己定義控件如何生成HTML代碼,CSS 控件適配器工具包新版發布 介紹如何配置自己的瀏覽器定義文件。詳細的可以參考MSDN:瀏覽器定義文件架構(browsers 元素)
如何設置GridView讓它在IE和FF下都能正常顯示呢?下面會進行說明。
1.單元格都有邊框線,效果如下:
<asp:GridView ID="GridView1" runat="server" CellPadding="3" GridLines="None" BackColor="Black" CellSpacing="1">
<FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
<RowStyle BackColor="#ECF5FF" ForeColor="Black" />
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle BackColor="#A6CBEF" Font-Bold="True" ForeColor="#404040" BorderColor="#A6CBEF" />
</asp:GridView>
說明:GridLines="ALL",CellSpacing="0"是造成FF和IE下顯示不同的一個很大的原因;其實不進行設置border也是可以達到單元格表現出邊框的樣式。CellSpacing="1"就控制了單元格之間的間隔是1px,通過設置table的背景和tr的背景來表現出單元格td的border,實際上td的border為0,這個看起來很像的border是table的背景,tr的背景僅僅是改變了td的背景,td之間的space則是根據table的背景顯示的,這就是CellSpacing="1"帶來的border效果。這樣在IE和FF下都能正常顯示了。
2.只有橫線,沒有豎線的效果:
GridView樣式如下設置:需要借助額外的css,Gridview自帶的類似樣式不兼容FF
<style type="text/css">
.table{border:solid 1px black}
.table th{border-bottom:solid 1px black;}
.table td{border-bottom:solid 1px black;}
</style>
<asp:GridView ID="GridView1" CssClass="table" runat="server" CellPadding="3" GridLines="None" BackColor="#ECF5FF" CellSpacing="0">
<FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
<RowStyle BackColor="#ECF5FF" ForeColor="Black" />
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle BackColor="#A6CBEF" Font-Bold="True" ForeColor="#404040" BorderColor="#A6CBEF" />
</asp:GridView>
3.只有豎線的效果:
更改上面的
<style type="text/css">
.table{border:solid 1px black}
.table th{border-right:solid 1px black;}
.table td{border-right:solid 1px black;}
</style>
即可。
更改table樣式為:
.table{border:solid 1px black}
.table th{border:solid 1px black;}
.table td{border:solid 1px black;}
可以實現第一種的顯示效果,這才是真的border
至此,GridView的樣式設置告一段落了。上面的設置方法在IE,FF下測試通過