バックグラウンド
最初の列が左にフロートされ、3番目の列が右にフロートされる標準の3列レイアウトがあります。最初の列には、フルハイトの背景が必要です。
- このレイアウトはテンプレート用であるため、3つの列のいずれかが最も長いコンテンツを持つ可能性があります。
- マークアップソースの順序を変更できないため、
display:table解決策はありません。 - DOMノードを追加できません。
- レイアウトは最小幅と最大幅の中央に配置されているため、背景色が組み込まれているページに垂直方向に繰り返される背景画像を添付することはできません。
- IE7では問題ないように見える必要がありますが、IE8+にはサポートが必要です。
解決
フルハイトの左の列を実現するために、に疑似要素を作成しましたcolLeft。その疑似要素の固定位置は、ビューポートの下部、高さ100％に設定され、左側の列の後ろに配置されています。このソリューションは次の理由で素晴らしいです：
- IE8+は疑似要素をサポートします。
- 疑似要素は左側の列にアタッチされているため、テンプレートに左側の列がない場合、背景は当然そこにありません。
leftor属性を設定しないことによりright、固定位置の疑似要素は左側の列にとどまります（中央のレイアウトに適しています）。
これがCodePenの例です。
（IEでCodePensを表示するときは、ドキュメントモードがブラウザモードに従っていることを確認してください）。
問題
IE8では、フルハイトの左列の背景は、最初のビューポートの下部（折り目）までしか伸びません。
疑似要素の代わりに新しいノードを使用して別のテストを作成しました。leftColBgこれはIE8で期待どおりに機能します。つまり、固定位置が機能するはずです。
IE8と生成されたコンテンツで見つけることができる最良の説明は次のとおりです。疑似要素のフィルターグラデーションがIE8で機能しないのはなぜですか？
IE8は、コンテンツを含む「オブジェクト」ではないため、生成されたコンテンツを誤って配置していると思います。誰かがこのIE8のバグをよりよく説明できますか？修正はありますか？