Question

以下是我在IE 6中运行时出现问题的一些代码版本。它似乎在IE 7，IE 8，FireFox和Google Chrome中运行良好。但是在IE 6中，当我在树视图中展开和折叠节点时，SurroundingWrapper div调整大小，但是底部的消息保持粘合到位（我更喜欢它仍然粘在div SurroundingWrapper的底部）。有人可以告诉我为什么这个代码在IE 6中崩溃了吗？

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Page</title>

    <style type="text/css">

        #SurroundingWrapper
        {
            position: relative;
            border: 1px solid #D0D0D0;
            width: 800px;
            min-height: 20px;
            margin-top: 10px;
            margin-bottom: 20px;
            padding: 20px;
            background-color: White;
            line-height: 1.2em;
        }

        .Message
        {
            position: absolute;
            display: block;
            width: 100%;
            text-align: center;
            font-size: 11px;
            color: Gray;
            bottom: 2px;
            min-height: 0px;
        }

    </style>

    <!--[if lte IE 7]>
        <style type="text/css">

            #SurroundingWrapper
            {
                height: auto !important;
                height: 20px;
            }

            .MessageIe6and7Fix
            {
                width: 100%;
            }

        </style>
    <![endif]-->

    <!--[if lt IE 7]>
        <style type="text/css">

            .MessageIe6Fix
            {
                height: 1px;
            }

        </style>
    <![endif]-->

</head>
<body>
    <form id="form1" runat="server">
    <div id="SurroundingWrapper">
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">
        </asp:TreeView>
        <div class="Message MessageIe6and7Fix MessageIe6Fix">
            This is a message at the bottom of the page.</div>
    </div>
    </form>
</body>
</html>

此外，这是树视图的关联站点地图文件：

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/Default.aspx" title="Level 1"  description="">
    <siteMapNode url="~/A.aspx" title="Level A"  description="">
      <siteMapNode url="~/a1.aspx" title="Level a"  description="" />
      <siteMapNode url="~/b1.aspx" title="Level b"  description="" />
    </siteMapNode>
    <siteMapNode url="~/B.aspx" title="Level B"  description="">
      <siteMapNode url="~/a2.aspx" title="Level a"  description="" />
      <siteMapNode url="~/b2.aspx" title="Level b"  description="" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

非常感谢提前！

安德鲁

Answer 1

好的，经过多次痛苦和挫折之后，我终于实现了以下可行的解决方案：

<div id="SurroundingWrapper"> 
    <div id="SurroundingWrapperWithoutMessage">
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> 
        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"> 
        </asp:TreeView> 
    </div>

    <div class="Message"> 
        This is a message at the bottom of the page.</div> 
</div>

然后我给了SurroundingWrapperWithoutMessage div一个最小高度，让SurroundingWrapper div收缩以包含它和页面底部的消息。这甚至适用于IE 6。

另外，由于IE 6无法识别CSS中的min-height，我只使用height来指定SurroundingWrapperWithoutMessage div的垂直尺寸。

干杯，

安德鲁

在IE 6中调整Div的大小

1 个答案: