月: 2019年3月

タイトル通りなのですが「特定エリアの外をクリック」という判定が意外と難しく、苦労しました。
結局、モーダルウィンドウの上下左右にダミーのdivを配置して、それをクリックしたらモーダルを閉じるという処理で対応しました。

————————–
20190510追記
背景に全画面の平面を敷けばいいだけでした…

さてさて、今日も悩まされました。IE11です。
Win7のIEとWin10のIEでレイアウトが変わるという何とも理解しがたい現象でしたが、原因は「游明朝」でした。

Win8.1・Win10のIE11で、游書体(游明朝・游ゴシック)の余白がおかしい！どうする？

游ゴシックでもレイアウトが変わるようですね。
もうマジで勘弁して下さい。

要素の高さを揃えたいことがあると思います。
最近はflexboxでやってしまうことも多く、そんなに苦労しなくなりました。
しかし縦書きコンテンツだと相性が悪いみたいでfloatでするしかなさそう…と思っていたら、なんとinline-blockで速攻解決しました！

https://www.nishishi.com/css/box-float-inline-block.html

昔はjquery.matchHeight.jsとか使っていましたが、inline-block使えばfloatすら使わなくていいようです。
まだまだ知らないことがありますね。

iPhoneを横向きにするとなぜか文字だけがCSSで指定したサイズよりも巨大になってしまい、想定しているレイアウトから崩れることがあります。

これは -webkit-text-size-adjust を100%に指定すると直ります。

今日初めて遭遇して焦りました。

ヘッダーをpositionで固定に変更したとたん、中央寄せしていたはずのヘッダーがなぜかずれました。
しかも微妙に15px程度。
さらに不思議なことにiPadで見るとずれていない。

なんだこれ？とググったところヘッダーを固定したのが原因っぽいです。
https://qiita.com/tds517/items/264545ef7af2885f3297

今回はヘッダーの幅を100vwで指定していたので100%にしただけで直りました。
他の要因でも起きるみたいで結構怖いですね。