IE7フロート右の問題
-
10-07-2019 - |
質問
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サポートは必要ありません)
このようにする必要があります(現時点ではchrome / ie8で動作します)=&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="#" 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>
簡単な説明:
英語と描画をご容赦ください。ただし、クロスブラウザでフロートとクリアがどのように機能するかを簡単に説明します。
要素は左または右にフロートできます。要素がフローティングの場合、要素は「通常」をプッシュしません。コンテンツは下向き。理由を見る-
フロートおよびクリア:
凡例:オレンジ/フロート右、ブルー/フロート左、グレーの線/クリアディバイダー、赤い四角形/境界
この場合、1行テキストの2つの要素があります。1つは左にフロートし、もう1つは右にフロートします。フローティングの場合、コンテンツを下に押し出すことはありません。したがって、灰色の線で clear:both
を使用しない場合、以下の内容は2つの浮動要素の間で上にスタックされるため、必要なものではない可能性があります。
フロートの下で clear:both
を使用すると、フロートの下のコンテンツは、フロート要素の最高の高さまでプッシュされます。これは、図の2番目と3番目のセクションに示されています。
フロートのみ:
凡例:オレンジ/フロート右、青/通常のコンテンツ、グレーの線/次の線で分割された線、赤の四角形/境界
青色の標準コンテンツは、デフォルトですでに text-align:left;
です。したがって、左向きです。この行からフロートするようブラウザに指示しているため、フロートを通常のコンテンツの前に配置する必要があります。
さまざまな条件を試して、その効果を確認する必要があります。フロートを前、後ろ、左右にフロート、両方をクリア、左右をクリアします。
他のヒント
すべてのIE-Float-Comboに常に役立つ:すべてのfloat要素に display:inline;
修正後にクリアを試してください:
div:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}