Question

我希望对某些UI代码进行更新，并且我想看一下网络上的一些主要资源：A List Apart。我发现this article创建了一个带有固定标题的布局，左面板和一个使用固定位置的主面板。我在MasterPage中实现了这个想法，但现在我的结果非常奇怪：当页面呈现时，标题和主div根本不会显示在IE 7中。当我调整到最小程度时，所有内容都会正确地弹出。 FireFox没有遇到这样的问题。

这是CSS（我将每个条目放在一行以节省垂直空间）：

html { overflow: hidden; }
body { overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%; font: 0.8em Verdana, sans-serif; line-height: 1.25; color: #333; background-color: White; }
#coachheader { padding: 0; margin: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 96px; overflow: hidden; }
#side { padding: 0; margin: 0; position: absolute; top: 100px; left: 20px; bottom: 20px; overflow: auto; width: 200px; }
#main {padding: 0; margin: 0; position: absolute; top: 100px; left: 240px; right: 20px; bottom: 20px; overflow: auto; }
a.SM { color:#666666; text-decoration:none; padding-left: 10px; padding-right:10px; margin-left:2px; margin-right:2px; vertical-align:middle; }
img.SM { height: 20px; vertical-align:middle; }

这是HTML：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Coach.master.cs" Inherits="FitnessCompanion.Coach" %>
<!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 id="Head1" runat="server">
    <title>My Title</title>
    <link rel="stylesheet" href="../../stylesheetforstaff.css" type="text/css" />
    <!--[if lt IE 7]>
    <style type="text/css">
        #side { height:expression(document.body.clientHeight-120); }
        #main { height:expression(document.body.clientHeight-120); width:expression(document.body.clientWidth-260); }
    </style>
    <![endif]-->
</head>
<body runat="server" id="body1">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div id="coachheader">  <!-- This div does NOT show up initially -->
        <div style="text-align:left; float:left; margin-left:6px;">
            <img src="/images/BSDILogoWeb.png" alt="BSDI" />
        </div>
        <!-- The Menu -->
        <div style="float:right; margin-right:6px;">
           <a menu table...>
        </div>
    </div>
    <div id="side">
        <menu output for the side - this div shows up!>
    </div>
    <div id="main">
        <!-- Main Page - this Div does not show up. Contents: just a table -->
        <div>
        <asp:contentplaceholder id="ContentBody" runat="server">
        </asp:contentplaceholder>
        </div>
    </div>
    </form>
</body>
</html>

正如您所看到的，这是一个非常直接的想法应用。我玩了好几个小时。我已经将溢出设置从auto更改为隐藏等等，所以我不认为是这样。奇怪的是，这个方法的一个变体只有一个标题和主要区域在网站的另一部分工作正常但是该变体在这个页面上也不起作用，即使在我基本上消除了所有内容之后！该网站的这一部分位于子目录中，但无关紧要。

任何帮助将不胜感激！再一次，我觉得我距离1毫米：它在Firefox中运行良好，一旦我向任何方向调整窗口大小，无论多么微小，都会很好看。

Answer 1

试着把这个：

<!--[if lt IE 7]>
    <style type="text/css">
        #side { height:expression(document.body.clientHeight-120); }
        #main { height:expression(document.body.clientHeight-120); width:expression(document.body.clientWidth-260); }
    </style>
<![endif]-->

位于＆lt; / body＆gt;之前的底部标签

我不确定这会有效，但我认为表达式是内联计算的，而document.body还没有。

Answer 2

是的，IE确实有时会消失元素。

然而，当我在IE7中尝试你的代码时，元素显示得很好，但这可能是因为我给了它们背景颜色。

有一些技巧可以让网页在IE中更稳定，例如添加position:relative;将元素转换为图层，在浮动元素上添加display:inline;，为元素添加背景或指定元素上的固定大小。

Answer 3

感谢John和Guffa试图提供帮助。我一直在玩代码，发现它显然是IE计算大小的能力的一个缺陷。如果我将IE条件代码更改为包含IE 7，以便在Javascript中计算大小，则页面现在始终有效。最初的文章说，IE 7中的修改缺陷是固定的，但显然，在某些版本中（我在7.0.5730.11）浏览器仍然存在这个基本CSS的问题。

以下是该页面的更新部分：

<!--[if lt IE 8]>
<style type="text/css">
    #side { height:expression(document.body.clientHeight-120); }
    #main { height:expression(document.body.clientHeight-120); width:expression(document.body.clientWidth-260); }
</style>
<![endif]-->

注意“8”而不是if测试中的7。

为什么在创建页面时不会出现这些Div？为什么他们出现在调整大小？

3 个答案: