min-height、min-width対応ブラウザ例をCSSで詳しく解説

min-height と min-width は、最小高さと最小幅という 2 つのコンテナ属性であり、誰もがよく知っていると思います。

まず最小身長について話しましょう。これは簡単そうに見えます。

以下のインタビューの例を見てください:

<p style="border:5px solid #f00;min-height:200px;width:300px;padding:12px;">
    最小高度</p>

動作チャートは次のとおりです:

あまり早く喜ぶ必要はありません。IE6.0 を心から嫌っていますが、直面しなければならないことを忘れないでください。昼も夜も、次のように応答します あなたのもの:

そんなわけがない、中国人の金持ちも貧乏人もポケットにお金がなくなったのは誰ですか？たぶん、それは言うべきではありません。私利私欲のない中国人に私腹を肥やして国に無償で寄付させたのは誰だというべきだろう。

IE ブラウザをアップグレードする余裕はありません。哀れな田舎者よ！ ！ ！

やりすぎです…

問題は解決しなければなりません！貧しい人たちにも彼らなりの生き方がある。

ある現象が突然頭に浮かびました！

コード:

<p style="border:5px solid #f00;height:120px;width:300px;padding:12px;">
    最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度最小高度</p>

コンテナに高さを与える場合、標準ブラウザはオーバーフローが設定されていない場合、コンテンツは超過しますが、コンテナの高さは変わりません。この時点で、前のステップに戻ります。高さを調整したい場合は、もちろん高さ属性を削除できます。特定のスペースを占有するために最低限の高さが必要な場合があります。そこで min-height 属性が導入されます。しかし、残念ながらie6.0はそれをサポートしていません。 ！

しかし、同じコードを IE6.0 でテストしたところ、結果は次のようになりました:

本当に驚きです! ！ IE6 では、コンテンツが高さを超えると、実際には高さが失敗します。 ！これはまさに min-height が達成しようとしていることではないでしょうか?

そのため、ie6.0 にはハック (_height:120px) テクノロジーを使用する必要があります。ここで「しなければならない」と言ったのは、私はハッキングを使うのが絶対に嫌いだからです。それはあなた自身で体験してください。私の原則は、可能な限りハックを使用することです。

コードは次のとおりです:

<p style="border:5px solid #f00;min-height:120px;_height:120px;width:300px;padding:12px;">
    最小高度</p>

テスト後、期待どおりです。

道はついに半分終わりました、明らかに、私たちはこれに満足していないだけが、さらに多くのものを得ることができます。テクノロジーへの道において貪欲にならないでください。 ！

この効果を実現するには min-width が必要です。

まずテストしてみましょう:

<p style="border:5px solid #f00;min-width:120px;;padding:12px;">
    最小宽度</p>

しかし、結果は私たちを驚かせました。すべてのブラウザで動作するわけではありませんでした:

何が起こっているのですか?試験、全員がストライキ中です！ ！よく考えてみると、これではうまくいかないことがわかりました。デフォルトでは、コンテナの高さはコンテンツによって決まりますが、幅は決まりません。デフォルトでは、親コンテナの幅が継承されます。もちろん、表示がブロックされていることが前提です。

ああ、そうなったのですね。コンテナのデフォルトの幅はコンテンツによって決定されるようにする必要があります。

ここから、いくつかの状況を考えました:

1 display:inline ただし、この場合、幅が無効になるという問題があります。この場合、min-width も無効になります。オーディションに合格します！ ！ ;

2 そこで、display:inline-block 属性を考えました。これで問題はないはずです。 ?やってみましょう

コードは次のとおりです:

<p style="border:5px solid #f00;display:inline-block;min-width:220px;;padding:12px;">
    最小宽度</p>

テスト後、Firefox、Chrome、IE8.0で動作します。

くそー、IE6 はまだ動作しません! ！そしてトラブルを起こす人が出てきたらie7も動かなくなります。いいえ、よく見てみると、ie6 と ie7 は display:inline-block; を実装していないことがわかりました。
コードを変更してください:

<p style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;;padding:12px;">
    最小宽度</p>

まずは ie7 を試してください。OK、完了です。 ie6 をもう一度試してみますが、まだ「悪い」です。 ！心配しないでください。少なくとも min-width の使用法は理解しています。これは幅がコンテンツによって決定される場合にのみ機能します。さらにコンテンツを入れてみて、制限を超えるとコンテナは大きくなりますか?

そうですね、確かにそうです。ただし、小さな問題があります。それは、コンテンツがブラウザの幅を超える場合でも、折り返されてしまうということです。ほっといて！まずはie6.0の問題を解決してください。

よく考えてみると、i6だけが問題だという元の考えに戻りました。そもそもどうやって解決したのでしょうか？あ、ie6.0自体の高さはmin-heightの特徴があります。幅も同様でしょうか？ _width:220px を追加して試してみましょう

<p style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;">
    最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</p>

結果は深刻で、非常に残念です。私たちの唯一の思考回路が遮断されました！何をするか？何をするか？ ……「改行！！？？だったら改行させないよ！」 ！ ！

<p style="border:5px solid #f00;display:inline-block;*display:inline;zoom:1;min-width:220px;_width:220px;padding:12px;white-space:nowrap">
    最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度最小宽度</p>

竟然可以了！加点内容！！！

竟然连上面的，超出浏览器宽度问题也解决了！试试其它浏览器。ie7、ie8、firefox、chrome全部通过。以外收获！

3 position:absolute 嗯这个看起来也行。

<p style="border:5px solid #f00;position:absolute;min-width:220px;_width:220px;padding:12px;white-space:nowrap">
    最小宽度</p>

加些内容：

依然可以，预期达到。

4 float:left 这种情况最常用。应该也行！

上代码：

<p style="border:5px solid #f00;float:left;min-width:220px;_width:220px;padding:12px;white-space:nowrap">
    最小宽度</p>

同样加些内容：

预期达到！

我能想到就这几种情况，当然里面有分析不到位的地方，请不吝指正。有些浏览器，没有测，测试完给个结果，不行的话，再想办法。

以上がmin-height、min-width対応ブラウザ例をCSSで詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。