置換要素の絶対配置

検索ボックスを更新して検索ボタンを左に動かした……つもりだったが、動いていなかったのを直していた。単純に置換要素を絶対配置する時にautoの扱いが非置換要素と違うことを完全に忘れていたのが原因で直せたが、どうしてこうなるのかがよくわからなくなったので少し調べてみたが更に混乱しただけだった。Chrome 40(31あたりから変わったらしい?)の挙動が正しそうだが……。

View Demo: position: absolute on Replaced Element

デモでは置換要素を二つ(入力ボックスと送信ボタン)並べ、送信ボタンを絶対配置しようとしている。

最初の例では入力ボックスの幅が100%になっており、枠線の分だけはみ出す状態だ。この状態で続く送信ボタンを絶対配置し、leftプロパティーを無指定にすると、なぜかInternet Explorer 11では入力ボックスの隣に配置される。他のブラウザーでは入力ボックスのすぐ下だ。

二番目の例では入力ボックスにbox-sizingプロパティーを適用して、幅を100%にしてもはみ出さないようにしている。この状態ではFirefox 35やMobile Safari 8でも送信ボタンが入力ボックスの隣に配置されるようになる。Chrome 40では入力ボックスのすぐ下だ。

三番目の例では送信ボタンへleft: 0を指定している。Internet Explorer 11では入力ボックスに重なってしまう。他のブラウザーでは入力ボックスのすぐ下だ。


折り返しが起きるタイミングとleft: autoの解釈の違いが重なっていて、たまたま似たような配置になったりならなかったりするようだ。仕様最新の仕様も含め)がややこしいこともあって、どれがバグでどれが仕様なのかよくわからなくなった。

ともかくautoによる適当な配置に期待せずにばっちりと値を指定することでこの辺りでハマることはなくなるだろう。