Internet Explorerのdivでフロートを左右に動かせない

StackOverflow https://stackoverflow.com/questions/1443007

質問

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>

and 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で正常に機能します。 2列にテキストがあり、1列にアイコンと少量のテキストが含まれている必要があります。 IEでこれを機能させるにはどうすればよいですか？ div clear = bothを試しましたが、それは何もしていません。

また、FF、Chrome、およびIEで機能するページの作成方法とスタイルの使用方法に関するヒントを提供できるすべての人に賛成<！> gt; = 7。

役に立ちましたか？

解決

Doctypeを定義しておらず、IEがQuirksmodeで標準モード（またはほぼ標準）に合わせてページを表示していることが原因である可能性があります。

詳細については、この記事をお読みください：

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

サイトを標準モードで確認しましたが、IE7では2列が正常に動作しました（FF <！> amp; Chromeなど）

他のヒント

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

  1. ドキュメントにDOCTYPE（例：Transitional HTML 4.01）を追加します。これにより、IEはいわゆる<！> quot; standards-compliant <！> quot;になります。 e曲的な<！> quot; quirks <！> quotではなくモード。モード;
  2. そのような左と右のクラスを再利用しないでください。 IE7 +のみである子セレクターを使用する必要があり、それは必要ありません。
  3. divにfloatのみが含まれている場合、高さは0になります。これに対処するには、<！> quot; clear：both <！> quot;で高さ0のdivをそれらの下に置きますそれまたは<！> quot; overflow：hidden <！> quot;親で;
  4. align = <！> quot; center <！> quot;を取り除きます。それは標準ではありません。

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

<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; }

など。

最初にすべてスキップしました

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を使用して）左ポイントを幅の半分に設定し、マージンを要素の幅の半分に戻すことです（「要素」は要素です）中央に配置します）。

変更された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でも正常に機能することを試してください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top