読者です 読者をやめる 読者になる 読者になる

以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

インライン要素にwidthとheightを指定して、無視されるとき/されないとき

css

update:2008.3.12

ノートにあとで調べるとしておきながら半年以上放置
調べたら「非置換インライン要素」がわかった。以下まとめ。

インライン要素は二種類に分類できる。

  • 「置換要素」
  • 「非置換インライン要素」

この二つの違いはcssでwidth、heightを指定したときに適用される/されないで確認できる。

仕様では・・・、widthとheightが指定できるインライン要素

5つある。このタイプのインライン要素を「置換要素」と呼ぶ

  • img要素
  • input要素
  • object要素
  • select要素
  • textarea要素
  • button要素

仕様では・・・、widthとheightが指定「できない」インライン要素

これらを総称して「非置換インライン要素」と呼ぶ。

  • 「置換要素」以外の全てのインライン要素
    • span要素とか。

じゃあ実装では置換要素と非置換インライン要素はどうなる?

仕様通りなら仕様だけ確認するだけでいいのだか・・・・
後方互換モードのIE」(IE7,IE6,MacIE)で、ダメ(仕様通り実装されてない)。
指定したwidthとheightが全てのインライン要素で有効になる

後方互換モードのIE」is・・・(ざっくり)

  • IE7
    • xml宣言無し、かつDoctype無し、のhtml
    • Doctype有りだが、「HTML4.01 Transitional」の指定あり、dtdURIが書かれていない、html
  • IE6
    • xml宣言つきhtml
  • xml宣言無し、Doctype無し、のhtml
  • Doctype有りだが、「HTML4.01 Transitional」指定でがdtdURIが書かれていない、html
  • MacIE
    • xml宣言無し、Doctype無しのhtml
    • Doctype有りだが、「HTML4.01 Transitional」指定でがdtdURIが書かれていない、html
    • Doctype有田が、HTML4.01のみ指定で、Transitional/Strict/Framesetの指定無し、dtdURI記載無し、のhtml

参考記事

//w3g.jp/css/guide/target#replace:button" target="_blank">適用要素:button要素がどういうわけか、置換要素から除外されて記述されていた。
//2xup.org/sample/displaymode/" target="_blank">displaymode check sample:「ウェブ標準の日々」の配布資料。No.120辺り。
//reference.sitepoint.com/css/replacedelements" target="_blank">Replaced Elements:SitePoint CSS Referenceより。

参考文献

//www.amazon.co.jp/exec/obidos/ASIN/4798010928/clientsidescr-22/ref=nosim/" name="amazletlink" target="_blank">Web標準の教科書―XHTMLCSSでつくる“正しい”Webサイト』:最初に調べるときに手に取った本。役に立たなかった。置換要素/非置換インライン要素の区別については記載されているのだが、索引からは、辿れないページに書かれている(p.179)。改訂時にこの辺りの不備を改善してほしい。
  • 後方互換モードのIEでは非置換インライン要素へのwidth/height指定が有効になること
  • button要素も置換要素であること

上記については書かれてなかった。

//www.amazon.co.jp/exec/obidos/ASIN/4774136840/clientsidescr-22/ref=nosim/" name="amazletlink" target="_blank">実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~』:有名本。最初に販売してた出版社が潰れて別の出版社から再販売されてる。自分が参照してるのは旧出版社版。
  • 置換要素/非置換インライン要素については、言葉は頻繁に使われているが説明は見つけれなかった
  • 当然索引から辿って調べることもできない。
  • 言葉の説明のポリシーはどうなってるんだろう?
  • 出版社のサポートページの正誤表には載ってなかったが、誤植発見
    • 「Appendix2. DOCTYPE スイッチの一覧表」pp.410-411。下記のXHTML1.0 TransitionalのDoctype宣言を付けた場合に、IE6が後方互換モードになると書いてる。

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~
望月 真琴 市瀬 裕哉 福島 英児
技術評論社
売り上げランキング: 18038