2009-10-04 10 views
7

最大幅(パーセント)はIE 8またはFirefox 3では機能していないようです。特定のピクセル幅は問題ありません。何か不足していますか?CSS最大幅(パーセント値)

私は入力フォームを持っていて、その右側に説明テキストを表示したいと思います。しかし、私は、説明文がそのフォームを潰すことを望んでいません。

私は以前にmax-widthを使用していませんでしたが、それは優れた解決策でした。私はこの単純なCSSスタイルを書いた:

div.hint {max-width: 50%; float: right;} 

その後、私は書いた:

<div class=hint>... hint text</div> 
<form action=xxx method=post> 
... etc ... 

div.hintが左に深刻なフォームをカボチャ。

私はこれをフォームの代わりにテキストで試しました。 div.hintは画面の約95%を占め、左にわずかなマージンを与え、次に他のテキストが完全にその下にプッシュされます。

最大幅をパーセントから固定ピクセル数に変更すると、動作するように見えます。しかし、私はユーザーのブラウザのサイズを知らないので、ピクセルに基づいていません。

ドキュメントに記載されている内容にもかかわらず、パーセントがmax-widthで機能しないか、または何か不足していますか? Seanmonsterさんのコメントに応えて


:私はこのページを開くと

<html><title>Max width test</title> 
<style> 
.form {max-width: 75%; float: left;} 
.hint {max-width: 50%; float: right;} 
</style> 

<div class=hint> 
<p>Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that 
all men are created equal. We are now engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, 
can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting place 
for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. Etc. 
</div> 
<div class=form> 
<table> 
<tr><th>Label 1 <td>Value 1 
<tr><th>Label 2 <td>Value 2 
<tr><th>Label 3 <td>Value 3 
</table> 
</div> 
</html> 

:ここで、私は私が動作するはずと思ったものを示しているのではなく些細なく、完全なWebページをあげますブラウザでは、2つの列ではなく、「ヒント」divが幅の100%をとり、その下の「form」divが幅の100%を占めるdivを取得します。最大幅と幅の両方を「幅:50%」に変更すると、予想通り2つの列が得られます。どうやら、最大幅がどのように働くべきかについて何か不足しているのですが...私はそれを理解しません。

+0

フロート。おそらくあなたは私たちに例へのリンクを付けることができたので、それが野生で起こっているのを見ることができます。 – seanmonstar

+0

私はFF3.5.3でMacとPCであなたのサンプルコードを開きました。うまくいきました。私はあなたがIE 7で説明している動作を取得し、テストするための8つを持っていません。 – Emily

+0

@Emily:私はIE 8を上に掲示する前に上記の例を試してみました。私はそれがFirefoxで動作するというあなたの言葉を取り上げます。しかし、私はFirefoxと同様に失敗した他の同様の例を試しました。だから、ここで根本的な原因を完全に免れていないようです。いずれにしても、少なくともIE 7、IE 8、Firefox 3で動作するものが必要です。おそらく最も人気のあるブラウザです。 – Jay

答えて

3

複数のシナリオでは、最大幅がバグです。これは既知の問題です。

ここに記事があります。 http://edskes.net/ie8overflowandexpandingboxbugs.htm

あなたはこのバグをトリガーするための3つの事柄必要 - maxWidthに、スクロールバーを、そしてあなたは、あなたの問題は存在しないはず与えてくれた情報で

+0

seanmonstarが言ったように、あなたはアウトター要素も疲れている必要があります。昔は(つまり-7)、幅が100%だった場合は可能な限り拡大しました。新しい日では、要素のデフォルト値はnothingです。つまり、周囲の要素の幅も100%にする必要があります。それは仮定されていません。 – diadem

+0

私は、例えばフロートを使用するのではなく、2列のテーブルでそれらをやろうとしたので、そのポストが示すよりも多くの状況でバグが発生すると思います。しかし、ありがとうございます:それは既知のバグであることを知っているだけではなく、私は狂っている問題を解決することはありませんが、少なくとも私は完全に異なるソリューションを探すように指示します。 – Jay

+0

@Diadem:私はテストケースの1つで親要素の幅を100%に設定して試しましたが、役に立たなかった。適切な組み合わせの設定でうまくいく可能性があり、私はそれにぶつかりませんでした。ああ、私は、新しいブラウザのバージョンが出るまで、最大幅を放棄するつもりだと思う。 – Jay

5

最大幅は、FF3とIE8ではパーセンテージで完璧に機能します。ただし、パーセンテージは親の幅に基づいています。周囲の子供ではありません。

+0

最良の結果を得るには、親の幅が静的な値であることを確認してください。 –

+1

周りの子供たち?これは本当に意味をなさない...あなたは兄弟を意味しますか? –

1

div.hintを浮動させて左に作成し、それらの両方が最大幅50%である場合、それらはお互いにすすんではいけません。

<div> 
    <div class="form" style="float:left; max-width:50%"> 
    <form></form> 
    </div> 
    <div class="hint" style="float:left; max-width:50%"> 
    </div> 
</div> 
+1

さて、私はそれを試みました。そして、最初のdivは画面幅の100%を得て、上に来ます。 2番目のdivは画面幅の100%で下に来ます。これは、max-widthが完全に無視されるようなものです。私が "max-width"を "width"に変更すると、それはもちろん、幅が可変ではなく固定されていることを除いて動作します。 – Jay