inline-tableに対する負のマージン

Internet Explorer 11やFirefox 25ではinline-tableとした要素への負のマージンが無視されることがあることを知った。Chrome 30では無視されない。条件と仕様がよくわからないのでただのメモ。

View Demo: display: inline-table and negative margin

デモの2つのテストの違いはdisplayプロパティーのみ。positionプロパティーで横に張りつけるように配置したケースのみで起こるみたい。具体的にはこのウェブログで使っている共有ボタンのところ。普通のフローでinline-tableな要素に対して負のマージンを使った場合には、特に違いはなく意図した通りに位置がずれる。とりあえずdisplayプロパティーの上書きで修正している。

絶対配置したブロックの子がinline-tableかつ負のマージンを持つ時のみ挙動が違うようなので、まず遭遇することはなさそうな気はする。遭遇したけど。