7

ここで同様の質問を見ましたが、回答がありませんでした。親 div 内で要素が右に浮いているという問題があり、IE7 で div がページの幅全体を引き伸ばしています。これは、他のブラウザー (Firefox および Chrome) では発生しません。参考までに、質問の後に写真も掲載しました。私が使用しているHTMLは以下のとおりです。

<div id="journal" class="journalIE">
    <div class="title_bar">
        <div>
            Testing
        </div>
        <div class="actions"></div>
        <div class="clear"></div>
    </div>
</div>

これらのタグに使用している CSS も以下に示します。上記で参照されている他の人の質問と私の問題との間で一貫していることに気付いたのは、両方の親divにポジショニングが適用されていることです(上の人は絶対的で、私は修正しました)。

#journal
{
    z-index: 1;
}

.journalIE
{
    right: 1px;
    bottom: 18px;
    position: fixed;
}

#journal .title_bar
{
    background: #F3F3F3;
    border: 1px solid #C5D6E8;
    color: #363638;
    font-size: 11pt;
    font-weight: bold;
    height: 20px;
    padding: 4px;
    margin-bottom: 4px;
}

#journal .title_bar .actions
{
    float: right;
}

.clear
{
    clear: both;
}

「actions」クラスが右に浮いていることに注意してください。その浮きを取り除くと、私の箱はこのようになります。しかし、float を追加すると、画面全体が引き伸ばされ、次のようになります。これは IE の既知のバグですか。他のブラウザーでは発生していないため、気が狂いそうになります。

不思議に思っている人のために、私は「アクション」div にコンテンツを持っていましたが、根本的な問題まですべてを取り除きました。

どんな援助でも大歓迎です。どうもありがとう。

4

3 に答える 3

1

幅が必要です: *浮動ボックスには明示的な幅が必要です ('width' プロパティを介して割り当てられるか、置換された要素の場合は固有の幅)。*

経由：W3C

于 2010-02-04T17:21:27.637 に答える
0

「アクション」divで何をしたいのか説明しなかったので、あなたが何を望んでいるのか完全にはわかりませんが、「アクション」divを「テスト」divのすぐ隣に浮かせたい場合は、別の .floatr クラスを作成してみました。または、スタイルを div に直接適用するだけでも機能します。

.floatr {
float: right;
}

.floatr クラスを使用して、それを「アクション」div に適用します。

<div class="actions floatr"></div>

理由はわかりませんが、「actions」divは、そのように設定したクラスのfloat設定を無視しているようです。個人的には、複数のクラスを div に適用することを好みます。これにより、その効果が必要な他の div よりもそのクラスを再利用できますが、一部のブラウザーは、最初のクラスの後に宣言されたクラスを無視すると聞いています。まあ、私はまだ主要なブラウザでその問題に遭遇していません...

あっ、待って。

コードをもう一度調べたところ、クラスの設定方法に問題があったようです。あなたの "actions" div はアクションを見逃していました。CSS にコンマを追加してみてください:

#journal .title_bar, .actions
{
    float: right;
}

場合によっては、効果を直接適用して、期待どおりに動作することを確認する必要があることを理解し、それが機能する場合はおそらく構文エラーであると判断することがあります。へー。

于 2010-02-12T17:31:21.790 に答える
0

これを行う

<div id="journal" class="journalIE"> 
<div class="title_bar"> 
    <div class="Test"> 
        Testing 
    </div> 
    <div class="actions"></div> 
    <div class="clear"></div> 
</div>

次にCssクラスを追加します

.Test { float:right; }

動作しない場合はお知らせください。

MNK

于 2010-02-04T17:17:51.670 に答える