2

私の Web サイトと一部のブラウザーでの表示に問題があります。

http://www.karentiede.com

Firefox 2.0 およびその他の多くのブラウザーでは、「コンテンツ」列が左にはみ出して装飾的な境界線の上に表示され、一部のコンテンツが読めなくなります。

ここの Q&A の 1 つは、すべてのページHTML 4.01 Strict DOCTYPEを作成するとすべてのブラウザーが同じように動作するようになる可能性があることを示唆していましたが、その質問は Firefox では逆であり、IE では機能しませんでした。私が試すべき別の/別の修正はありますか?

CSS から:

.column2 {
    float: right;
width: 80%;
}

行動するページのいずれかから：

<body id="schedule_toc">
<div id="col1_schedule_toc">
<div class="column2">

http://www.browsershots.orgでサイトを確認したところ、多くのブラウザで初期表示がおかしく見えます。1 人か 3 人の (おそらく Firefox の) 読者からテキストが見えないと言われたことがあります。

4

4 に答える 4

2

ページを確認しましたが、ページのサイズを変更した場合にのみ問題が発生します。

問題は、右の div が 80% であるため、画面が小さくなり、比率が変化すると、その 80% が左の背景に重なってしまうことです。

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/を見て、「静的流体」レイアウトを設定する方法を確認してください。

于 2009-01-12T19:54:52.967 に答える
2

これが発生する理由は、画像 (左に浮いている) がページ全体の高さではないためと思われます。そのため、ページの幅が画像とテキストの両方を並べて表示するのに十分でない場合、テキストは次の使用可能な空白に分割されます。

両方の要素を左に浮かせてみて、「装飾的な」列の幅に等しい左余白を column2 に適用します。

.column1 { float: left; width: 125px; }
.column2 { float: left; margin-left: 125px; }
.clear { clear: both; }

両方の要素の下に div をクリアする必要があります。

<div class="column1">...</div>
<div class="column2">...</div>
<div class="clear"></div>
于 2009-01-12T20:39:33.033 に答える
1

savageguyが指摘したように、問題は間違いなく比率です。必要なものが可変幅の右 (メイン) 列を持つ固定幅の左列である場合は、これを使用できます (テストされていませんが、動作するはずです)。

#col1_schedule_toc {
    width: 175px;
    float: left;
}

.column2 {
    float: right;
    width: 100%;
}

EDIT：ちなみに、（少なくとも私が見たページでは）右側を開く前に左側の列も閉じていないことに気付きました。技術的には、右側の列は左側の内側にあるため、提案された修正で問題が発生します. したがって、列 1の終了divを移動して、列 2 の開始divの上に配置する必要もあります。

EDIT 2: さらに、 Plan Bで指摘されているように、親 (コンテナー) div が崩壊するのを防ぐために、両方の要素の下に div をクリアする必要もあります。

div.clear {
    clear: both;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
}
于 2009-01-12T20:37:10.277 に答える
0

savageguy の的確なアドバイスに加えて、左のページにある画像 (写真など) は固定幅です。これが、ブラウザーのサイズを変更すると、80% が突然幅が広すぎる理由です。

列2で、画像の幅の左マージン+必要な分離量を設定し（たとえば、160で機能するはずですが、それで遊ぶことができます）、列2の幅を（残りの幅の）100％にします) 重複を防ぐ必要があります。

[編集: プラン B も非常に堅牢なソリューションを提供します。)

于 2009-01-12T20:40:23.560 に答える