【メモ】inline-blockの隙間のブラウザ差異(微妙に違う)ので困ったら
個人的にはHTMLはシンプルでCSSはメンテナンス性が高ければあんま気にしない人です。
このCSSのメンテナンス性で一番めんどくさいなあというのが、inlin-blockの隙間。
で、まれにトラブると。
基本的には隙間の詰め方ってのはネットの海にごろごろ転がっているので、好きな方法でやってくれって感じなんですが、
一番多いケースはリストの横並びですね、というかこれ以外のときはfloatなりtable-cellなりで対処したほうがきれいだし。
inline-blockを指定したli間にスペースが空く理由は、改行コードが1文字として判定され半角スペース程度開くからで、
まあそういう仕様なのでここはもう妥協するとして、
一番手っ取り早いのは改行を取る＝1行にする、これはでも見た目が悪い。
次に改行コードをコメントタグで囲む、これも見た目が悪い。
いや～inline-block使わなければいいのでは、ということでblockにしてfloatする、
まあ別にいいけど、こちらも親要素とclearの仕方によっては変な事になる場合もある。
table系のCSS使うのは意味が違う気がする。(でも高さとvertical-alignは揃えやすい)
でまあ結局巷でよく使われるのは、
親要素にletter-spacing:-.40em、子要素にletter-spacing: normal。
んで、ある日OS X El CapitanにしてSafariで実機確認したら、なんかずれる。
微妙にピクセルずれるんですよね、Safariで。
かといってletter-spacing外すと目も当てられないくらい崩れるし。
要するに-0.40emという値が合わないみたいで、ここを変えればいいんですが、そうするとほかのブラウザでずれる。
どうしろって言うのかって感じだったんですが、
もっと手っ取り早い話がありました。
親要素にfont-size: 0、子要素に任意のfont-size。
スペースとはいえ文字なので(見えないけど)、フォントサイズを消してしまえば見えなくなるということで。
子要素で改めてサイズ指定すればまあ大丈夫って感じです。
この方法も色々あるかもしれないので、併用してうまく表示されるほうにすりゃいいんじゃねえかなって感じです。
