以下の問題はIE7、Firefox、Opera 9、Safari 3（Beta）に対応したフォームにCSS 2007でなんとか解決させました。
input要素がらみ、特にwidth/heightとborderのはなしでわからないことが発生した。
先日のデザインテンプレート0208で、screenメディアのCSSが適用されたときに右上にでてくるはずの検索ボックスを見てみると、IE6（後方互換モード）やOperaでは、入力ボックスと検索ボタンが同じ高さになるが、Firefoxで見ると、入力ボックスが大きく、検索ボタンが小さくなっている。CSSでは、両方にidを指定して、それぞれに同じheightを指定しているんだけれど。
どうやら、FirefoxやIE6の標準準拠モードでは、inputのtype="text"なやつではborderをheightに含めず、type="submit"やtype="button"なやつではborderをheightに含めているようだ。結果として、それぞれに同じheightとborderを指定しても、入力ボックスが大きく、検索ボタンが小さくなるのだ。
同じheightを指定しても (200 by 54 pixels, 0.8KB)
で、質問はふたつ。
正しい挙動はなに？というのがひとつめ。簡単に探せそうで探せなかった。CSS2の仕様書は別になんでもいいんじゃないと書かれているような気がしてちょっと怖いのだが。
Note. Notably for HTML, user agents may render borders for certain elements (e.g., buttons, menus, etc.) differently than for "ordinary" elements.
CSS2 Specificationの8 Box modelより
ふたつめは、で、どうしたらいいんですかねえ、というものになる。width/heightとborderを同時に指定しないとか、ボタンはイメージにすればいいとか、そもそも基本的なユーザーインターフェースに関する部分をいじるべきではないとか、それぞれ解答のひとつになるとは思うけれど、いいのかなあそんなんで、という疑念はある。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/499
CSS 2仕様書のAppendix A、及びCSS 2.1仕様書案Appendix Dにある、HTML4のスタイルシート例ではフォーム周りがばっさり除かれています。CSSレベル2では既存のフォームコントロールを表現できないらしいですね。
Geckoに対応するなら、ボタンに "-moz-box-sizing:content-box;" でしょうか。デフォルトスタイルシートで "border-box" が指定されています。これはCSS3 basic UI moduleのborder-boxプロパティの先行実装。
http://lxr.mozilla.org/mozilla/source/layout/style/forms.css#409
http://www.w3.org/TR/2004/CR-css3-ui-20040511/#box-sizing
正しい挙動云々って、(デフォルト)スタイルシートの相違で片がつくような気が。
ありがとうございます。正しい描画方法があって、どれは正解でどれは間違い、というのがあるのかなあと考えていたのですが、CSSレベル2で既存のフォームコントロールを表現できないならば、正しいもなにもないですね。もとひこさんのおっしゃるとおり、(デフォルト)スタイルシートの相違、ということになりそうです。Operaの標準準拠モードとSafariは、入力ボックスとボタンの双方をborder-boxベースで描画し、MacIE5の標準準拠モードはどちらもcontent-boxで描画するようですので、1ピクセル単位であわせるのは無理っぽい、差異が生じることを前提に破綻の起きにくいデザインにするしかない、という結論になりそうです。