6

マークアップ

<%@ 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とFFの結果はIE&&FF
になりますhttp://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg
結果はIE6と7の両方で同じです。div間のギャップを削除するにはどうすればよいですか。

Udate
私はそれぞれ100％の高さの2つのdivを持っています。左側のdivは固定幅のフローティングdivです。正しいマージンを与えた後でも-左から右のdivに、2つのdivの間にギャップ（3px）が残ります。Firefoxの場合と同様に、正しくレンダリングされます。

私がクァークモードを使用した理由は、divの高さを100％取得できるようにするためです

このギャップをなくすことができますか？または、純粋なcssを使用して2列の100％高さのレイアウトを行うためのより良い方法はありますか？

4

4 に答える 4

5

すでに述べたように、あなたのコードはハックでいっぱいです。特に不要な定義を削除してください。ブラウザーがカスケードスタイル シートをサポートしていない場合、いずれにしても CSS はサポートされません。

そうは言っても、 position: absolute; を使用しないのはなぜですか。＃右？

のように

#right{
  position: absolute;
  left: 100px;
  padding-left: -100px;
  width: 100%;
  ...
}
于 2008-11-11T13:58:52.447 に答える
3

ページ上部のコメントを削除する 「IE を互換モードにする」こと

多くの「ハック」を使用しています。つまり、* html で始まる CSS セレクターを意味します。

それが問題の原因だと言っているわけではありませんが、それは良い習慣ではなく、エラーが発生しやすいものです。

1）これらのハックを使用する代わりに、ギャップの問題があるブラウザーの条件付きコメントを使用してみてください 2）テストしているIEのバージョンに関する情報を提供して、質問を編集してみてください（私の推測ではIE 6以下です）。

于 2008-11-11T13:55:00.833 に答える
2

正直に言うと、ボディ全体をこれらの div で埋める場合は、そのうちの 1 つに透明な背景を与え、ボディの背景色を目的の色に設定して、問題を隠したほうがよいでしょう。

特に、IE の問題を解決しようとして、目指している単純なレイアウトを考慮して、素晴らしくクリーンなコードに CSS ハックの疫病を導入している場合は特にそうです。

于 2008-11-13T16:27:58.817 に答える
1

実際の問題は、終了 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>
于 2012-08-10T15:41:49.397 に答える