Internet Explorer 11やFirefox 25ではinline-table
とした要素への負のマージンが無視されることがあることを知った。Chrome 30では無視されない。条件と仕様がよくわからないのでただのメモ。
Demo: display: inline-table and negative margin
デモの2つのテストの違いはdisplay
プロパティーのみ。position
プロパティーで横に張りつけるように配置したケースのみで起こるみたい。具体的にはこのウェブログで使っている共有ボタンのところ。普通のフローでinline-table
な要素に対して負のマージンを使った場合には、特に違いはなく意図した通りに位置がずれる。とりあえずdisplay
プロパティーの上書きで修正している。
絶対配置したブロックの子がinline-table
かつ負のマージンを持つ時のみ挙動が違うようなので、まず遭遇することはなさそうな気はする。遭遇したけど。