Internet Explorer で表示すると、悲しいことにクワーク モードでスタックしている Web アプリケーションで作業を行っています。これらは IE 5.5 のレイアウト ルールであることを思い出してください。標準モードを有効にできない理由については説明しません。それはオプションではないと言うだけで十分です。
同様に、自分自身をアップグレードする「生きて呼吸する」ブラウザである Safari と Chrome でも同様に機能する必要があります。
Quirks モードの制限が解除された (IE9 が Standards モードのレイアウト ルールでページを実行する) ことを何らかの形で確認できたとしても、IE9 にはフレックスボックスがないため、フレックスボックスを使用することはできません。
サポートする必要があるレイアウト構造は次のとおりです。
_______________________________________________________
|<td.container>
| _________________________________
| |<span.row> |<span.X>|
| | Variable text (short) | X-icon |
| |________________________|________|
|_______________________________________________________
______________________________________________________________________________________________________
|<td.container> |
| __________________________________________________________________________________________________ |
| |<span.row> |<span.X>| |
| | Variable text (sometimes this text can be quite long. So long, in fact, that it really | X-icon | |
| | needs to wrap to the next line in the layout.) | | |
| |_________________________________________________________________________________________|________| |
|______________________________________________________________________________________________________|
td.container は動的であることに注意してください。固定幅ではありません!
あなたは、これはかなり基本的なレイアウトだと言いたいかもしれません。そして、私は同意する傾向があります!
しかし、あなたへの私の質問は、どのように??
inline-block を割り当てspan.row
たり、max-width を設定したり、その他の多数の方法でそれを行うことができますが、Quirks モードでこれを機能させる方法はないようです。IEで。インターウェブのどこを見ても、圧倒的な答えは「Quirks モードを使用しない」です。まあ、それはひどい真実ではありませんが、残念ながらこれは私を助ける答えではありません.
現在のソリューションでは、X アイコンがテキストとインラインで表示されるため、アイコンが折り返されて長い行が終了します。
確実に醜い回避策の 1 つは、span.row,span.X
アセンブリを独自のものにすること<table>
です。私はこれが好きではありませんが、必要があればそうします。同様に、含まれる要素の幅の変更につながる可能性のあるイベントを検出するために JS を使用するオプションがあり、レイアウトを直接計算して直接適用することができます。これは、テーブルを使用するよりもさらに悪いことです。なぜなら、この時点で、エンドユーザーは何か怪しいことが起こっていることを実際に伝えることができるからです。