Question

标记

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Zuhaib.test" %>
<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="css/general.css" rel="stylesheet" type="text/css" />
    <link href="css/outbound.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server" class="wrapper">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div id="left">
    </div>
    <div id="right">
    </div>  
    </form>
</body>
</html>

CSS

html, body
{
    margin:0;
    padding:0;
    border:0;
    overflow:hidden;
    width:100%;
    height:100%;
}
* html body 
{
    height:100%;
    width:100%;
}    
*{
    margin:0;
    padding:0;
}
.wrapper 
{
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    height:100%;
    width:100%;
}
* html .wrapper 
{
    width:100%;
    height:100%;
}
#left{
    float:left;
    height:100%;
    width:100px;
    overflow:hidden;
    background-color:Blue;
}
* html #left{
    height:100%;
    width:100px;
}
#right{
    margin-left:100px;
    height:100%;
    background-color:Red;
}
* html #right{
    height:100%;
}

导致IE＆amp;＆amp; FF
Resutls in IE & FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
IE 6＆amp; S的结果相同。 7.如何消除div之间的差距？

UDATE
我有两个div，每个都有100％的高度。左边div是一个固定宽度的浮动div。即使在向右侧div提供正确的边距之后，两个div之间仍然存在间隙（3px）。在firefox中它正确渲染。

我使用quirk模式的原因是能够为div获得100％的高度

这个差距可以消除吗？或者是否有更好的方法来使用纯css进行两列100％高度布局？

Answer 1

如前所述，您的代码充满了黑客攻击。请删除特别不必要的定义。如果浏览器不支持级联样式表，则无论如何都不支持CSS。

话虽如此，为什么不使用position：absolute;为#right？

在

中

#right{
  position: absolute;
  left: 100px;
  padding-left: -100px;
  width: 100%;
  ...
}

Answer 2

删除页面顶部的评论 “将IE置于怪癖模式”的事情

你正在使用很多'黑客'。我的意思是以* html

开头的CSS选择器

我不是说这是问题的原因，但这不是好的做法，而且容易出错。

1）尝试对具有间隙问题的浏览器使用条件注释，而不是使用这些黑客 2）尝试通过提供有关您正在测试的IE版本的信息来编辑您的问题（我的猜测是IE 6甚至更低）。

Answer 3

说实话，如果你用这些div填满整个身体，那么你最好给它们一个透明的背景，并将身体的背景颜色设置为所需的颜色，掩盖问题。

特别是如果在试图解决IE问题的时候，你会考虑到你正在拍摄的简单布局，将CSS骇人听闻地引入应该是干净利落的代码。

Answer 4

实际问题是结束div标签和下一个打开div标签之间的空白。如果将它们放在同一行上并且它们之间没有空格，或者用注释填充空白区域，那么空格就会消失。

<div id="left">
</div><div id="right">
</div>

或

  <div id="left">
    </div><!-- IE doesn't ignore whitespace between divs
  --><div id="right">
     </div>

浮动左边100％高度div - div之间的间隙

4 个答案: