IE7フロート右の問題

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

質問

Html =＆gt; 

<!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>
</head>
<body>
  <div style='border: 1px solid red; width: 100px;'>
    <a href="#">foo</a>
    <a href="#"style="border-color: blue; float: right;">bar</a>                
  </div>
something
</body>
</html>

IE7で問題が発生しました（IE6サポートは必要ありません）

IE7では、htmlは次のように表示されます。gt;
alt text

このようにする必要があります（現時点ではchrome / ie8で動作します）=＆gt;
alt text

何を変更すればよいですか？ ：）

役に立ちましたか？

解決

両方の要素をフロートさせてクリアする必要があります。

<!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>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#" style="float:left;">foo</a>            
    <div style="clear:both;"></div>
  </div>
something
</body>
</html>

または、次のようにフローティング要素を通常の要素の前に置くだけです：

<!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>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#">foo</a>            
  </div>
something
</body>
</html>

簡単な説明：

英語と描画をご容赦ください。ただし、クロスブラウザでフロートとクリアがどのように機能するかを簡単に説明します。

要素は左または右にフロートできます。要素がフローティングの場合、要素は「通常」をプッシュしません。コンテンツは下向き。理由を見る-

フロートおよびクリア：

alt text
凡例：オレンジ/フロート右、ブルー/フロート左、グレーの線/クリアディバイダー、赤い四角形/境界

この場合、1行テキストの2つの要素があります。1つは左にフロートし、もう1つは右にフロートします。フローティングの場合、コンテンツを下に押し出すことはありません。したがって、灰色の線で clear：both を使用しない場合、以下の内容は2つの浮動要素の間で上にスタックされるため、必要なものではない可能性があります。

フロートの下で clear：both を使用すると、フロートの下のコンテンツは、フロート要素の最高の高さまでプッシュされます。これは、図の2番目と3番目のセクションに示されています。

フロートのみ：

alt text
凡例：オレンジ/フロート右、青/通常のコンテンツ、グレーの線/次の線で分割された線、赤の四角形/境界

青色の標準コンテンツは、デフォルトですでに text-align：left; です。したがって、左向きです。この行からフロートするようブラウザに指示しているため、フロートを通常のコンテンツの前に配置する必要があります。

さまざまな条件を試して、その効果を確認する必要があります。フロートを前、後ろ、左右にフロート、両方をクリア、左右をクリアします。

他のヒント

すべてのIE-Float-Comboに常に役立つ：すべてのfloat要素に display：inline;

を与える

修正後にクリアを試してください：

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top