ブラウザの表示モードとinput要素のpadding

CSS XHTML

↑のような入力フィールドで、paddingを設定するとIEではフィールドのサイズがかわらずに余白が設定されて、文字の下が切れてしまうことがある。Firefoxでは問題ない。

なんとかならんもんかと思っていろいろ試してもだめだったので、人力検索はてなに質問を投げたら、ブラウザの表示モードを標準モードにしてみては？という答えが返ってきたので、早速試してみる。

before - IE ... 互換モード, Firefox ... 標準モード

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

after - IE ... 標準モード, Firefox ... 標準モード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

すると、見事にIEでもうまくいった。いやー、Webデザインは奥が深い、というか複雑すぎ！

表示モードで微妙にレンダリングの結果が違ってくることは知っていたけど、いままで気に留めたことがなかった。これからハマったときは表示モードについても調べるようにしよう。

参考