Create a very simple page in ASP.NET 2.0, add a TreeView control and set ShowLines=true; now browse the page with Internet Explorer 7: you'll very likely see something like this:
In IE 6 this looks good... 
The point is that Internet Explorer 7 changes the boxing model: now a box that's too small to accomodate ita content won't stretch like it does on all other browsers including IE6, it will try to stay as small as possible. The problem in this case is that the DIV tags generated by the control are just 1 pixel height, which was working fine until now. Here is how the "View source" for the page above looks:
1: [...]
2: <table cellpadding="0" cellspacing="0" style="border-width:0;">
3: <tr>
4: <td>
5: <div style="width:20px;height:1px">
6: <img src="/TreeViewSample/WebResource.axd?d=vGK_uMmdWLf5UZMMUhv9tSAl-YQg-jrsZ90xzYAI6TE1&t=632985107273882115" alt="" />
7: </div>
8: </td>
9: <td>
10: <a id="TreeView1n1" href="javascript:TreeView_ToggleNode(TreeView1_Data,1,TreeView1n1,'l',TreeView1n1Nodes)">
11: <img src="/TreeViewSample/WebResource.axd?d=vGK_uMmdWLf5UZMMUhv9tfjlKbdZ_ojL4O8CY0ydKO_HFK9lO1t2cZ2AjaDIqJy_0&t=632985107273882115"
12: alt="Collapse New Node" style="border-width:0;" />
13: </a>
14: </td>
15: <td style="white-space:nowrap;">
16: <a class="TreeView1_0" href="javascript:__doPostBack('TreeView1','sNew Node\\New Node')"
17: onclick="TreeView_SelectNode(TreeView1_Data, this,'TreeView1t1');" id="TreeView1t1">New Node</a>
18: </td>
19: </tr>
20: [...]
As you can see, the first DIV tag contains a style definition with "height:1px"; that's the problem.
And now, here is how we can sort this out:
Note that normally the style defined in the DIV takes precedence over the style defined at page level (or external .css file), but since in this case we need to override that setting, we can use the !important CSS directive; here is how the modified source looks like:
1: [...]
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head runat="server">
4: <title>Untitled Page</title>
5: <style>
6: .tree td div {
7: height: 20px !important
8: }
9: </style>
10: </head>
11: <body>
12: <form id="form1" runat="server">
13: <div>
14: <asp:TreeView ID="TreeView1" runat="server" ShowLines="True" CssClass="tree">
15: <Nodes>
16: <asp:TreeNode Text="New Node" Value="New Node">
17: <asp:TreeNode Text="New Node" Value="New Node">
18: <asp:TreeNode Text="New Node" Value="New Node">
19: [...]
And the resulting page:
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。