在 IE 6 中调整 div 的大小答案

【问题标题】：Resizing Div In IE 6在 IE 6 中调整 div 的大小
【发布时间】：2011-04-27 04:37:18
【问题描述】：

以下是我在 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>

非常感谢！

安德鲁

【问题讨论】：

标签： asp.net internet-explorer css

【解决方案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 的垂直尺寸。

干杯，

安德鲁

【讨论】：