今はもうIEへの完全対応などしませんが、原因が分からない乱れはやはり気になります。
デモサイトの一つで、メインのナビゲーションとタグリストがサイト幅をはみ出て横スクロールバーが出てる。なんだこれ？flexのバグには対処したのに、、、
言われなければ気が付かないかもしれない程度の乱れだし、ワードプレスも「Twenty Twenty-One」テーマで完全にIEは切ったみたいだし、放置でもいいんだけど、、、
タグリスト
現在このサイトのボトムに出しているようなタグリストが、サイト幅で折り返してくれなかった。
はみ出しているラッパーを、
- display: inline-flex
- overflow: hidden
として、どうやら解決した模様。
- display: flex
- overflow: hidden
とすると、はみ出た分が想像通り切れちゃう。
別のデモサイトでは、まったく同じテーマでもきれいに折り返していたので、まだ疑念は残る。
ナビゲーション
こっちもはみ出していた。同じテーマでもはみ出たり、はみ出なかったり。
サブメニューが原因でした。
- ホバーでvisiblity: hidden ⇒ visible、visiblity: 0 ⇒ 1
- ポジションはabsolute
- transformでサイト幅に収まるよう位置調整
※左端、右端のメニューにサブメニューが設定されている
結局、transformなしの状態でブロック幅に収まるようにし、transformでいい感じの位置に来るようにしたところ、きっちり収まってくれました。
ぱっと見、ボックス内に収まって見えるのでなかなか気づかなかった。
また、サブメニュー内に長めのアンカーが入っていないと状況自体が発生しないので、これまた見過ごしがち。
なんで？
「子要素をposition: absoluteにしたら親要素のサイズには含まれない」って思ってたけど、状況が発生するのがIEだけなので、やっぱりバグか。
対処できた後に改めてググると、あっさり参考記事が見つかることが多いのは私だけだけだろうか、、、
flexboxでabsoluteの子要素の位置がおかしくなる【IE11】
そのほか1
- 要素が3つ
- 1番目を左端
- 2、3番目を右寄せ
にしようとしてjustify-content: flex-endを使うとどうも表示が怪しい。
justify-content: flex-startだときれいに並ぶ。
そのほか2
これはIEあるあるだと思うけど、flexの中にflexを入れるともうパニック。
display: flexじゃなくても済む箇所は出来るだけdisplay: blockにすると、それだけでどうにかなることが多い。こういうケースでだけかもしれないけど。
以上、レイアウト制限やHTML変更をせずとも簡単なCSSで回避出来たので追及おしまい。
これ以上の解明・解決が出来てもな～んにも生み出さないし。
連休なのをいいことに、久々に徹夜してしまった。
かなりピンポイントですが、同じお悩みの方のほんの一助になれば、と思いつつメモ終了。
