ピュアHTML + CSSのクロスブラウザの最小幅と最大幅

長い間、私は1つの興味深い経験を共有したいと考えていました。つまり、式などを使用せずにminおよびmax-widthプロパティをエミュレートしました。 ハーネスは扱いにくいように見えるかもしれませんが、その主な利点は機能することです。 さらに、このようなことは、1行のコードでテンプレートエンジンを使用して簡単に実装できます。



トリックの要点は簡単です：

‹表› ‹tr› ‹td幅= 1100›-最大幅

‹分割幅= 900 /›-スペーサー、最小幅



そしてそのように、幅は表ではなくセルにあります。 したがって、テーブルは（この場合）1100よりも広くなりませんが、既にある場合、スクローラーは表示されません。 さらに、作業領域の幅が900未満の場合、スクローラーは既に表示されます。

• 例： test.dis.dj/stopper
• 余分なコードが削除されたバージョン： test.dis.dj/stopper/clean.php
• UPD： IE6の条件付きコメント付きバージョン： test.dis.dj/stopper/conditional.php

ブラウザの異なるOSでテスト済み：

• Firefox：3.5.2、3.0.13、2.0.0.16
• IE：8、8、7、6モード
• Opera：10、9.64、9.2、8.0
• Safari：4.0、3.4
• クローム：2.0.172.43

PSもちろん、このセマンティクスは不十分ですが、IE6の実装を作成するよりも、面倒な1つのバインディングを使用する方が良いと思いました...ここではすべてが少なくとも明確です。 極端な場合、オプションのコメントの下にあるすべてのコードを削除して、1つのDivを最小幅と最大幅の外側に残すことができます。 UPD：このバージョンをリストに追加しました。

PPSそれが既にどこかにあった場合-すみませんが、私は他のどこにもそれのようなものを見たことがない...