4

次の HTML は、Firefox 2 & 3 および IE7 で必要なように見えます。Left左がボタン、右がボタン、真ん中のRight文字が…真ん中！

ただし、IE6 ではLeftボタンの位置がずれており、中央に配置されているように見えます。

誰でも理由を提案できますか??

<!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>
    <title>Layout problem!</title>
    <style type="text/css">
        DIV#Footer
        {
            padding: 10px;
            color: #fff;
            background-color: #484848;
            position: relative;
            text-align: center;
        }
        DIV#Footer INPUT
        {
            margin: 5px 15px;
            position: absolute;
            top: 0px;
        }
        DIV#Footer INPUT.right
        {
            right: 0px;
        }
        DIV#Footer INPUT.left
        {
            left: 0px;
        }
    </style>
</head>
<body>
    <div id="Footer">
        <input class="left" type="button" value="Left" />
        Some text in the middle
        <input class="right" type="button" value="Right" />
    </div>
</body>
</html>

（私はIE Developerツールを使用してこれを分析および修正しようとしましたが、役に立ちませんでした...）

4

6 に答える 6

13

hasLayoutのプロパティ (IE のもの…) をトリガーする必要があります#footer。幅と高さによってトリガーされます。幅または高さを設定したくない場合はzoom、CSS で IE のみのプロパティを使用できます。

<!DOCTYPE html>
<html>
<head>
    <title>Layout problem!</title>
    <style type="text/css">
        div#footer
        {
            padding: 10px;
            color: #fff;
            background-color: #484848;
            position: relative;
            text-align: center;
            zoom: 1;
        }
        div#footer input
        {
            margin: 5px 15px;
            position: absolute;
            top: 0;
        }
        div#footer input.right
        {
            right: 0;
        }
        div#footer input.left
        {
            left: 0;
        }
    </style>
</head>
<body>
    <div id="footer">
        <input class="left" type="button" value="Left">
        Some text in the middle
        <input class="right" type="button" value="Right">
    </div>
</body>
</html>

IIRC、IE では、要素には 2 つの異なるレイアウト動作があります。1 つhasLayoutはの場合true、もう1 つは の場合ですfalse。に設定されていることを確認するとtrue、このような多くの奇妙なレイアウトの問題を修正できます.

于 2009-02-11T17:24:35.093 に答える
2

これを試してください（インラインスタイルを許してください！）

<div id="Footer">
    <div style="width:100%">
    <input class="left" type="button" value="Left" />
    Some text in the middle
    <input class="right" type="button" value="Right" />
    </div>
  </div>
于 2009-02-11T17:14:36.117 に答える
0

私はあなたのアプローチに少しのチャンスを提案し、あなたがこれでうまくいくかどうか見てみましょう:

<style type="text/css">
    DIV#Footer
    {
        padding: 10px;
        color: #fff;
        background-color: #484848;
        position: relative;
        text-align: center;
    }
    DIV#Footer INPUT
    {
        margin: 5px 15px;
        position: absolute;
        top: 0px;
    }
    DIV#Footer INPUT.right
    {
        float: right;
    }
    DIV#Footer INPUT.left
    {
        float: left;
    }
    #Footer .center {
        float: left;
    }

</style>

次にHTMLで

<div id="Footer">
    <input class="right" type="button" value="Right" />
    <input class="left" type="button" value="Left" />
    <div class="center">Some text in the middle</div>
</div>

次に、それらを希望どおりに並べるために、いくつかのマージンを与える必要があります。これは、フッター、またはこれらのアイテムのフッター内のコンテナーに固定幅を与えない限り、流動的なレイアウトでは機能しません。

于 2009-02-12T01:26:53.140 に答える
0

ie6 で絶対位置の div タグを処理するために私が見つけた別のオプションは、CSS に左と右の両方の値を追加することです。

作業している div の幅がわかっている場合は、簡単な計算です。

divボックスを所定の位置に「ステープル」しているようです。

私が読んだ他のすべての提案（ie6をie7またはie8のように動作させるJavaScriptを含む）を試しましたが、うまくいきませんでした。

上記の解決策はそうでした。

幸運を！

于 2010-02-09T20:54:53.880 に答える
0

フローティング/配置された要素は、通常整列されたテキストの前に最初に配置する必要があります。表示される順序で配置しないでください。

また、!important を追加して優先順位を上げ、Microsoft の IE Developer ツールバーを使用して、どのルールが有効になっているかを確認することもできます。親要素の幅は？

ただし、機能するはずです。

于 2009-02-11T17:13:00.910 に答える