GridView 列宽度 浏览器兼容问题
1 <asp:GridView ID="gvFriendInvite" runat="server" EnableModelValidation="True"
2 CellPadding="4" ForeColor="#333333">
3 <AlternatingRowStyle BackColor="White" />
4 <Columns>
5
6 <asp:BoundField DataField="SendDateTime" HeaderText="邀请时间" >
7 <ItemStyle CssClass="lpadding" />
8 <HeaderStyle HorizontalAlign="Center" Width="160px" />
9 </asp:BoundField>
10 <asp:BoundField DataField="InviteMail" HeaderText="被邀请人" >
11 <HeaderStyle HorizontalAlign="Center" Width="200px"/>
12 <ItemStyle CssClass="lpadding"/>
13 </asp:BoundField>
14
15 <asp:BoundField DataField="IsRegister" HeaderText="注册时间" >
16 <HeaderStyle HorizontalAlign="Center" Width="80px"/>
17 <ItemStyle HorizontalAlign="Center" />
18 </asp:BoundField>
19 <asp:BoundField DataField="RegisterName" HeaderText="注册会员" >
20 <HeaderStyle HorizontalAlign="Center" Width="120px"/>
21 <ItemStyle CssClass="lpadding" />
22 </asp:BoundField>
23 <asp:BoundField DataField="IsFristLodging" HeaderText="首日入住" >
24 <HeaderStyle HorizontalAlign="Center" Width="80px"/>
25 <ItemStyle HorizontalAlign="Center"/>
26 </asp:BoundField>
27 <asp:BoundField DataField="IsLodgingECoupons" HeaderText="绑特价券" >
28 <HeaderStyle HorizontalAlign="Center" Width="80px"/>
29 <ItemStyle HorizontalAlign="Center"/>
30 </asp:BoundField>
31 <asp:BoundField DataField="IsLodgingSendPoint" HeaderText="入住邀请人送积分" >
32 <HeaderStyle HorizontalAlign="Center" Width="120px"/>
33 <ItemStyle HorizontalAlign="Center"/>
34 </asp:BoundField>
35 <asp:BoundField DataField="Remark" HeaderText="备注" >
36 <HeaderStyle HorizontalAlign="Center" Width="400px"/>
37 <ItemStyle CssClass="lpadding"/>
38 </asp:BoundField>
39 </Columns>
40 <EditRowStyle BackColor="#2461BF" />
41 <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
42 <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
43 <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
44 <RowStyle BackColor="#EFF3FB" />
45 <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
46 </asp:GridView>
2 CellPadding="4" ForeColor="#333333">
3 <AlternatingRowStyle BackColor="White" />
4 <Columns>
5
6 <asp:BoundField DataField="SendDateTime" HeaderText="邀请时间" >
7 <ItemStyle CssClass="lpadding" />
8 <HeaderStyle HorizontalAlign="Center" Width="160px" />
9 </asp:BoundField>
10 <asp:BoundField DataField="InviteMail" HeaderText="被邀请人" >
11 <HeaderStyle HorizontalAlign="Center" Width="200px"/>
12 <ItemStyle CssClass="lpadding"/>
13 </asp:BoundField>
14
15 <asp:BoundField DataField="IsRegister" HeaderText="注册时间" >
16 <HeaderStyle HorizontalAlign="Center" Width="80px"/>
17 <ItemStyle HorizontalAlign="Center" />
18 </asp:BoundField>
19 <asp:BoundField DataField="RegisterName" HeaderText="注册会员" >
20 <HeaderStyle HorizontalAlign="Center" Width="120px"/>
21 <ItemStyle CssClass="lpadding" />
22 </asp:BoundField>
23 <asp:BoundField DataField="IsFristLodging" HeaderText="首日入住" >
24 <HeaderStyle HorizontalAlign="Center" Width="80px"/>
25 <ItemStyle HorizontalAlign="Center"/>
26 </asp:BoundField>
27 <asp:BoundField DataField="IsLodgingECoupons" HeaderText="绑特价券" >
28 <HeaderStyle HorizontalAlign="Center" Width="80px"/>
29 <ItemStyle HorizontalAlign="Center"/>
30 </asp:BoundField>
31 <asp:BoundField DataField="IsLodgingSendPoint" HeaderText="入住邀请人送积分" >
32 <HeaderStyle HorizontalAlign="Center" Width="120px"/>
33 <ItemStyle HorizontalAlign="Center"/>
34 </asp:BoundField>
35 <asp:BoundField DataField="Remark" HeaderText="备注" >
36 <HeaderStyle HorizontalAlign="Center" Width="400px"/>
37 <ItemStyle CssClass="lpadding"/>
38 </asp:BoundField>
39 </Columns>
40 <EditRowStyle BackColor="#2461BF" />
41 <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
42 <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
43 <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
44 <RowStyle BackColor="#EFF3FB" />
45 <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
46 </asp:GridView>
今天在使用GridView 的时候发现了如下的问题:在IE8,IE9 及Chrome 和firefox 中GridView 显示一切正常,但是在IE7中显示的却有点夸张。
后来才发现是GridView列宽度 设置的问题:
我们可以在ItemStyle中设置<ItemStyle CssClass="lpadding" Width="160px" />,
也可以在HeaderStyle中设置 <HeaderStyle HorizontalAlign="Center" Width="160px"/>。
在ItemStyle设置宽度后在IE8,IE9 及Chrome 和firefox 中 显示是没有问题一切正常的。
但是在IE7 中就显示的有点小问题了(不会按照你设置的宽度显示)。要解决这个问题其实很简单,即宽度在HeaderStyle 设置。