web-dev-qa-db-ja.com

IE7フロート右の問題

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="#">foo</a>
    <a href="#"style="border-color: blue; float: right;">bar</a>                
  </div>
something
</body>
</html>

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

IE7では、htmlは次のように表示されます=>
alt text

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

何を変更すればよいですか？ :)

cssinternet-explorerinternet-explorer-7
48
Arnis Lapsa

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

<!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;です。したがって、左向きです。この行からフロートするようブラウザに指示しているため、フロートを通常のコンテンツの前に配置する必要があります。

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

96
mauris

すべてのIE-Float-Comboで常に役立ちます：すべてのfloat要素にdisplay: inline;を与えます

1
Martin Labuschin

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

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
0
Lark