1

html は次のとおりです。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title></title>
  </head>
  <body>
    <div align="center">
      <div id="main-header-content" class="content">
        <div class="left">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
          euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
          minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
          aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
          vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
          facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
          luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber 
          tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod 
          mazim placerat facer possim assum.
        </div>
        <div class="right">
          <div class="left">
            <img src="http://www.mywebk9.com/images/question.png" alt="Questions"/>
          </div>
          <div class="right">
            <span class="small-text">Lorem ipsum dolor sit amet</span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

そしてstyles.css：

*
{
  margin: 0;
  padding: 0;
}
body
{
  font-family: Verdana;
  font-size: 8pt;
}
div.content
{
  width: 585px;
}
div#header-content div
{
  padding: 20px;
  text-align: justify;
}
div#main-header-content > div.left
{
  padding-left: 40px;
  padding-right: 7px;
  text-align: justify;
  width: 350px;
}
div#main-header-content > div.right
{
  padding-left: 7px;
  padding-right: 15px;
  width: 165px;
}
div#main-header-content div.right div.left
{
  width: 20px;
}
div#main-header-content div.right div.right
{
  text-align: left;
  width: 142px;
}
div.left
{
  float: left;
}
div.right
{
  float: right;
}
.small-text
{
  font-size: smaller;
}

これは FF と Chrome で正常に動作します。1 つはテキスト、もう 1 つはアイコンと少量のテキストの 2 つの列である必要があります。どうすればこれを IE で動作させることができますか? 私は div clear=both を試しましたが、何もしていません。

また、FF、Chrome、IE >= 7 で動作するページの書き方やスタイルの使用方法に関するヒントを教えてくれる人にも賛成票を投じてください。

4

4 に答える 4

3

doctype を定義しておらず、IE がページを標準モード (またはほぼ標準) に近いものとして Quirksmode で表示していることが原因である可能性があります。

詳細については、次の記事を参照してください。

http://www.quirksmode.org/css/quirksmode.html

あなたのサイトを標準モードでチェックしましたが、IE7 では 2 列が正常に動作します (FF や Chrome のように)。

于 2009-09-18T07:31:01.490 に答える
2

いくつかのことを提案できますが、実際にどれが役立つかはわかりません。

  1. ドキュメントに DOCTYPE (Transitional HTML 4.01 など) を挿入します。これにより、IE は婉曲的な「癖」モードではなく、いわゆる「標準準拠」モードになります。
  2. そのように左右のクラスを再利用しないでください。IE7 +のみである子セレクターを使用する必要があり、その必要はありません。
  3. div に float しか含まれていない場合、高さは 0 になります。これに対処するには、高さ 0 の div をそれらの下に配置し、その上に「clear: both」または「overflow: hidden」を親に配置します。
  4. align="center" を取り除きます。それは標準ではありません。

使用を検討するスケルトンは次のとおりです。

<div id="container">
  <div id="left">Text</div>
  <div id="right">
    <div id="icon">(image)</div>
    <div id="text">(text)</div>
  </div>
</div>

と組み合わせ：

html, body, div { padding: 0; margin: 0; border: 0 none; } /* or a proper reset CSS */
#container { margin: 0 auto; width: 585px; overflow: hidden; } /* center */
#left { text-align: justify; width: 350px; float: left; }
#right { width: 235px; float: right; overflow: hidden; }
#icon { float: left; width: 20px; }
#text { float: right; width: 142px; }

等々。

于 2009-09-18T07:37:54.760 に答える
1

最初は全部飛ばした

div#main-header-content > div.left

と置き換えます

div#main-header-content div.left

IE6 では動作しないためです。

第二に、私は使用します

div.right {
    float: left;
}

<div align="center">...</div>さらに、非推奨であるため、私は間違いなくスキップします。代わりに、div.content を次のように再配置します。

div.content {
    position: relative;
    width: 585px;
    margin-left: -292px
    left: 50%;
}

中央に配置するコツは、(position:relative または position:absolute を使用して) 左端を幅の半分に設定し、余白を要素の幅の半分に戻すことです (「要素」は配置したい要素です)。中心）。

于 2009-09-18T07:39:41.363 に答える
0

修正されたCSS

div#main-header-content  div.left
    {
      padding-left: 40px;
      padding-right: 7px;
      text-align: justify;
      width: 350px;
    }
    div#main-header-content  div.right
    {
      padding-left: 7px;
      padding-right: 15px;
      width: 165px;
    }

これらのクラスの ur css の代わりに、これが IE と Firefox でも正常に動作することを試してみてください..

于 2009-09-18T08:19:27.873 に答える