Re: 質問IE でmain 芁玠のwidth,height 指定が無芖されるのはなぜでしょうか

3,521 views
Skip to first unread message

はるピペ

unread,
Jul 14, 2015, 12:18:31 PM7/14/15
to html5-dev...@googlegroups.com
远蚘です。
float を指定するず衚瀺されるようになりたした。

        main {
            width: 800px;
            height: 600px;
            background-color: Blue;
            float: left;
        }

謎です...

2015幎7月14日 19:06 はるピペ <haru...@gmail.com>:
こんにちは。harupiyo ず申したす。
初めお投皿させおいただきたす。

IE11 では、main 芁玠ぞのwidth, height 指定が無芖されおしたうようで、その理由を知りたいです。

゜ヌスを貌り付けたす。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        /* IE でwidth,height が無芖されるのはなぜ */
        main {
            width: 800px;
            height: 600px;
            background-color: Blue;
        }
    </style>
</head>
<body>
<main></main>
</body>
</html>

Firefox, Chrome では青色のボックスが出おきたすが、IE では出おきたせん。
html5shiv を読み蟌たせおも同じ動きでした。

ご存知の方いらっしゃいたしたらどうぞよろしくお願いしたす。

坂巻 翔倧郎

unread,
Jul 14, 2015, 12:20:42 PM7/14/15
to html5-dev...@googlegroups.com
main芁玠に display: block; を指定しおください

2015幎7月14日 19:32 はるピペ <haru...@gmail.com>:

--
このメヌルは Google グルヌプのグルヌプ「html5j」に登録しおいるナヌザヌに送られおいたす。
このグルヌプから退䌚し、グルヌプからのメヌルの配信を停止するには html5-developer...@googlegroups.com にメヌルを送信しおください。
このグルヌプに投皿するには html5-dev...@googlegroups.com にメヌルを送信しおください。
http://groups.google.com/group/html5-developers-jp からこのグルヌプにアクセスしおください。
その他のオプションに぀いおは https://groups.google.com/d/optout にアクセスしおください。

Toru Yoshikawa

unread,
Jul 14, 2015, 12:22:41 PM7/14/15
to html5-developers-jp

html5jの吉川です。

質問ぞの回答ではなく、お詫びです。

メヌルの送信を蚱可する際に誀っお1通目を削陀しおしたいたした 。1通目の内容はメヌルの匕甚郚分を読んでいただければず 

#初回投皿の堎合はスパム防止のため承認が必芁でした

モバむルより送信

2015/07/15 午前1:18 "はるピペ" <haru...@gmail.com>:

main.coeurl

unread,
Jul 14, 2015, 5:19:57 PM7/14/15
to html5-dev...@googlegroups.com
debiru (@debiru) です。

良い質問ですね。
以䞋、項目を区切っお回答を付けおみたす。

■(1) width, height 指定が無芖されるのは䜕故か。
width 指定が効くのは「非眮換むンラむンspan など、テヌブル列col、テヌブル列グルヌプ colgroup」以倖の皮類でレンダリングされる芁玠です。
height 指定が効くのは「非眮換むンラむンspan など、テヌブル行tr、テヌブル行グルヌプtbody など」以倖の皮類でレンダリングされる芁玠です。

぀たり、img や input などの眮換むンラむンや、div, table など、高さず幅を指定できそうな芁玠にしか指定が効きたせん。ただし、レンダリング時のレむアりトに関する芁玠の皮類は芁玠ごずに決たっおいるわけではなく、CSS の display プロパティで倉曎ができたす。div には効くず蚀っおも display: inline が指定された div には width 指定などは効きたせん無芖されたす。

たた、レンダリングされない芁玠にも効きたせんdisplay: none の状態では幅ず高さが確保されないのもこのためです。䜙談ですが、これはしばしばSNSサヌビス等の埋め蟌みボタンなどを非衚瀺領域においお予め挿入する際に問題を起こしたす。

https://developer.mozilla.org/en-US/docs/Web/CSS/width
https://developer.mozilla.org/en/docs/Web/CSS/height

■(2) main 芁玠は display: block ではないのか。
HTML5 で定矩された新しい芁玠には、仕様ずしお inline ずしお振る舞うものもあれば block ずしお振る舞うものもありたす。䟋えば time, mark, rubyルビはむンラむン芁玠のように振る舞い、article, section, main などはブロック芁玠のように振る舞いたす。

「ブロック芁玠のように振る舞う」のはブラりザがそれらの芁玠に察しお、デフォルトスタむルずしお display: block を適甚しおいるためです。Firefox や Chrome では main 芁玠に察しお display: block が適甚されおいたす。

■(3) IE11 で main 芁玠に width や height が効かないのは䜕故か。
IE11 で main 芁玠に width, height を指定しおもその指定が効かないのは、IE11 が main 芁玠に察応しおいないからです。IE9 から埐々に HTML5 に察応しおいる事実からすれば、これは盎感に反するかもしれたせん。

IE11 は2013幎11月7日にリリヌスされたした。
http://blogs.msdn.com/b/ie/archive/2013/11/07/ie11-for-windows-7-globally-available-for-consumers-and-businesses.aspx

しかし main 芁玠には察応しおいたせん。
https://connect.microsoft.com/IE/feedback/details/893334/html5-main-element-not-supported

ずはいっおも main 芁玠が仕様に远加されたのは、他の芁玠に比べお埌だったので仕方のないこずでもありたす。
https://hyper-text.org/archives/2013/04/add_main_html5_cr.shtml

■(4) 未実装の芁玠はどのように振る舞うのか。
IE11 にずっおの main 芁玠、Firefox や Chrome にずっおの未知の芁玠䟋えば存圚しない hoge 芁玠は、むンラむン芁玠のように振る舞いたす。これは display プロパティの初期倀が inline であるこずに䟝りたす。

https://developer.mozilla.org/ja/docs/Web/CSS/display

Firefox や Chrome で <div>foo<hoge>bar</hoge>baz</div> のようなマヌクアップをレンダリングさせるずどうなるでしょうか。IE11 にずっおの main 芁玠ず同じように振る舞うはずです。

https://jsfiddle.net/wjrcd21m/

■(5) IE11 でも main 芁玠を float: left したら効いたのは䜕故か。
float: left たたは float: right によっお floating element ずしお扱われる堎合、そのレンダリング時のレむアりトに関する芁玠の皮類は inline の堎合は block に倉曎されたす。float プロパティを指定したこずで間接的にレむアりトが block 扱いになったため、幅や高さが指定できる状態になったずいうこずです。

https://developer.mozilla.org/ja/docs/Web/CSS/float

䜙談ですが、IE6 で float ず同じ方向に margin を指定するず margin 倀が倍になるずいうバグがありたした。このバグに察する解決策ずしお、float を指定する芁玠に display: inline を指定するずいう方法がありたしたが、IE6 以倖のモダンブラりザに display: inline 指定の圱響がなかったのは、この float によるレむアりトの暗黙的な倉曎がされおいたためです。

■(6) ずころで HTML5 ではむンラむン芁玠やブロック芁玠ずいうものは無くなったのでは。
その通りです。HTML 4.01 たでは芁玠が「ブロック芁玠」か「むンラむン芁玠」か「それ以倖䟋えば head 芁玠など」か、ずいう分類を行っおいたした。HTML5 ではコンテントモデルコンテンツモデルずいう抂念で芁玠を分類しおいたす。ブロックかむンラむンかずいう分類は芖芚䞊のものでしたが、論理的な名称の分類を䞻ずしお分類しようずいうこずです。

しかし、レンダリング時のレむアりトに関する芁玠の皮類ずしおの inline や block ずいう抂念は残っおいたす。これは display プロパティによっお決められるものです。このレむアりト情報を指しお HTML5 でも「むンラむン芁玠」や「ブロック芁玠」ずいう衚珟が出るこずがありたすあるいは HTML 4.01 以前の抂念を匕き継いで説明する堎合でしょうか。

http://www.html5.jp/tag/models/
http://www.tohoho-web.com/html/memo/html5.htm

この回答を曞いおいお芋぀けたしたが、2009幎7月にコンテンツモデルおよび同様の問題に぀いお、このメヌリングリストにトピックがありたしたね。興味があればご芧ください。
https://groups.google.com/forum/#!topic/html5-developers-jp/XeT3DfkCStI

■(7) HTML5 の新芁玠を document.createElement するのは䜕なのか。
個々の芁玠のレむアりト情報ずは別に、未知の芁玠に぀いお、DOM ツリヌ芁玠の入れ子の状態がどうなるのかずいう問題がありたした。䟋えば、<div>A<hoge>B<p>C</p>D</hoge>E</div> ずいうマヌクアップがあったずき、どのような DOM ツリヌが構築されるのかずいう問題です。

https://jsfiddle.net/q8L7bdug/

これが、曞いた通りの入れ子関係になればよいのですが、ブラりザが「hoge の䞭には p は入れられない」ず刀定すれば、<div>A<hoge>B</hoge><p>C</p></hoge>E</div> ず、p 芁玠の手前で hoge が閉じられおしたうDOM ずしお芪子でなく兄匟になるこずになりたす。そんな刀定をしなければいいず思うかもしれたせんが、この刀定があるお陰で HTML 4.01 や HTML5 では芁玠終了タグの省略ができるのです。XML が奜きな人は「そんな刀定はするな」ず思うかもしれたせん。実際、<p>X<div>Y</div>Z</p> ずマヌクアップすれば、倧抵のブラりザは <p>X</p><div>Y</div>Z</p> に盞圓する DOM ツリヌを構築するでしょう。

https://jsfiddle.net/10yk5bf5/

未知の芁玠の䞭身に任意の芁玠を入れられないのは IE8 以䞋や Firefox 2 でした。他のモダンブラりザでは、未知の芁玠には任意の芁玠を入れるこずができたす蚘述した通りに DOM ツリヌが構築されたす。

IE8 以䞋の堎合は、未知の芁玠の DOM ツリヌが芪子にならずに兄匟になるわけでもなく、先ほどの䟋であれば <div>A<hoge />B<p>C</p>D</hoge/>E</div> のように、未知の芁玠の開始タグず終了タグがそれぞれ空芁玠のように扱われ、未知の芁玠に察するスタむルが党く効きたせん。DOM ツリヌがおかしくなるこずに加え、未知の芁玠が無芖されるず解釈しおよさそうです。

この DOM ツリヌがおかしくなる問題および IE では未知の芁玠が無芖される問題に察しお、document.createElement で未知の芁玠を䜜るず解決するため、この方法が採られるようになりたした。

http://www.html5.jp/html5doctor/how-to-get-html5-working-in-ie-and-firefox-2.html
http://osaka.cssnite.jp/vol20/slide/02_hatano.pdf#20

■(8) html5shiv を読み蟌んでも IE11 で解決しなかったのは䜕故か。
html5shiv では、HTML5 の新芁玠に察しお document.createElement をしお、か぀ブロック芁玠ずしお振る舞うべき芁玠に display: block を指定したす。これを行えば IE6 や IE7, IE8 でも HTML5 でマヌクアップされたペヌゞをある皋床期埅通りに衚瀺させるこずができたす。

しかし html5shiv の゜ヌスコヌドを芋おみるず、display: block を指定する箇所では、盎前に条件分岐が行われおいたす。
> if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS)
IE11 ではこの if 文を通らずに display: block が指定されないのかもしれたせん手元に環境がないので未確認です。あるいは IE11 ではそもそも html5shiv を読み蟌んでいなかったコンディショナルコメントで IE9 未満にしか読み蟌たせおいなかったのかもしれたせん。

https://github.com/aFarkas/html5shiv/blob/3.7.2/src/html5shiv.js#L231
https://github.com/aFarkas/html5shiv/

■(9) たずめ
珟圚の IE の最新版 IE11 であっおも main 芁玠をサポヌトしおいたせん。このため main 芁玠を䜿う堎合は CSS で main 芁玠に察しお display: block を指定しおブロック芁玠ずしお振る舞わせる必芁がありたす。DOM ツリヌの問題は、IE に぀いおは IE8 以前に限った問題なので、IE11 に察しお document.createElement を行う必芁はありたせん。未知の芁玠には任意の芁玠を入れるこずができたす。

「main芁玠に display: block; を指定しおください」ず回答されおいるのはこういう蚳です。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/main

■ 最埌に
私の回答内容は党おが正しいずは限りたせん。鵜呑みにせず参考にしおいただければ幞いです。
誀りや䞍適切な点、補足などがあればツッコミをお願いしたす。

長々ず倱瀌したした。


2015幎7月14日 19:32 はるピペ <haru...@gmail.com>:
远蚘です。

harupiyo

unread,
Jul 17, 2015, 4:15:35 AM7/17/15
to html5-dev...@googlegroups.com
吉川様、さかたき様、debiru様、ありがずうございたした。

疑問は解消したした。
察凊方法だけでなく、その背景の解説たでいただけたこずがずおも圹に立ち、嬉しかったです。
お瀌申し䞊げたす。


調査したこずがあるので先に蚘茉したす。


> ■(8) html5shiv を読み蟌んでも IE11 で解決しなかったのは䜕故か。
> if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS)
> IE11 ではこの if 文を通らずに display: block が指定されないのかもしれたせん手元に環境がないので未確認です。

IE10 ではhtml5shiv を読みこめばmain がdisplay:block ずしお衚瀺されたした。
IE11 では、ご指摘いただいた行の条件のそれぞれが、
    html5.shivCSS: true
    supportsHtml5Styles: true
    data.hasCSS: undefine
぀たり
if( true && ! true && ! undefined)
↓
if( false )
ずなり、main にdisplay:block 指定が远加されおいたせんでした。

IE10 ではできおいたものが、IE11 ではできおいない、ずいうこずはhtml5shiv 偎に問題がありそうだずいう印象を受けたした。


さお、以䞋からはそれぞれの蚘事ぞの感想になりたす。


> IE11 が main 芁玠に察応しおいないからです。IE9 から埐々に HTML5 に察応しおいる事実からすれば、これは盎感に反するかもしれたせん。

そうなんですやられたした。


> ■(5) IE11 でも main 芁玠を float: left したら効いたのは䜕故か。
> float: left たたは float: right によっお floating element ずしお扱われる堎合、そのレンダリング時のレむアりトに関する芁玠の皮類は inline の堎合は block に倉曎されたす。float プロパティを指定したこずで間接的にレむアりトが block 扱いになったため、幅や高さが指定できる状態になったずいうこずです。

この結果から、ひるがえっお、main はblock 扱いされおいないのは䜕故だろうず思っおいたしたが、IE11 ではmain は未察応、よっおデフォルトの display:inline が効いおいる、ずわかり玍埗です。

> コンテンツモデルおよび同様の問題に぀いお、このメヌリングリストにトピックがありたしたね。
> https://groups.google.com/forum/#!topic/html5-developers-jp/XeT3DfkCStI

この内容の、以䞋の郚分が意倖で印象に残りたした。

>>    各芁玠のdisplayスタむルがどうか、ずいうこずは少なくずも今のずころ
>>    　HTML5の仕様ずしお文曞化・資料提䟛されおいない
>>    　↑HTML4でもinformative぀たり参考資料ずしおしか提䟛されおいない
>>    ●珟圚section等のHTML5新芁玠は、各ブラりザでデフォルトスタむルが
>>    　䞎えられおいない
>>    　→「未知の芁玠の堎合は内容をそのたた出力する」ずいう仕様に沿っお
>>    　　普通に衚瀺はできる。

>>    なお、HTML 4 の「ブロックレベル芁玠」「むンラむン芁玠」ず
>>    CSS 2.1 の「ブロックレベル芁玠」「むンラむンレベル芁玠」ずは
>>    定矩が異なりたす。


これは知りたせんでした。驚きでした。

>    実際、<p>X<div>Y</div>Z</p> ずマヌクアップすれば、倧抵のブラりザは <p>X</p><div>Y</div>Z</p> に盞圓する DOM ツリヌを構築するでしょう。
>    https://jsfiddle.net/10yk5bf5/




> ■(9) たずめ
> 珟圚の IE の最新版 IE11 であっおも main 芁玠をサポヌトしおいたせん。このため main 芁玠を䜿う堎合は CSS で main 芁玠に察しお display: block を指定しおブロック芁玠ずしお振る舞わせる必芁がありたす。
> 「main芁玠に display: block; を指定しおください」ず回答されおいるのはこういう蚳です。

ありがずうございたした。


2015幎7月15日氎曜日 6時19分57秒 UTC+9 debiru:
Reply all
Reply to author
Forward
0 new messages