トップ > 日記 > なぜ、IE8では、画像が表示されないことがあるのか

なぜ、IE8では、画像が表示されないことがあるのか

日記



  • なぜ、IE8では画像が表示されないことがあるのか調べてみた

    互換表示ボタンがあるから、それを押してください。

    などと解説がある。



    閲覧者としては、それでいいことなんだけれども、



    プレイヤーとしてどうかというと、htmlのような簡単なものにどえらい手間をかけて、わざわざ標準モードにしているかといえば、質の高いコンテンツを提供するというところに尽きる



    自分に降りかかった火の粉、互換モードでお茶を濁そうと試みたが、実際問題は、互換モードなんて使えないものだった





    ブログ1個作って検証する運びになりました。




    shrink-to-fit

    CSS2 仕様では、要素の横幅が明確ではないと、フロートを指定された要素の横幅は常に "0" とみなされます（CSS2.1 仕様では、width : auto ; であれば、横幅は 0 ではなく、"shrink-to-fit" width と呼ばれる、｢内容にぴったりと合うように縮んだ｣幅になるとあります）。



    UA 側の実装は横幅が指定されていなくても、適当な領域を勝手に確保するようになっているようです（これが、一応の shrink-to-fit width のようですが振る舞いは不安定）。



  • <style>
.float-block{float:left;padding:1em;}

</style>...
<div class="float-block">
<img src="some.jpg" width="150" height="150" alt="test" />
</div>

    このようにするとIE8は、div幅がなくなる。明示しないと画像は見えない。
    imgではなくテキストなどだとその幅分は表示される。



    スタイルを指定する時には、divでラップしないでimg に直接指定してやる。または、divに幅を明示する必要がありそうです。





    私の場合、なぜdivでラップしたのか？

    templateを書いていて、テンプレート関数に、id　や　クラス　を　簡単に追加できなそうだったという簡単な理由



    <div class="gallery-thumb">
<?php echo wp_get_attachment_link( $image->ID ,array(150,150),true); ?>
</div>

    でスタイルに、幅を指定していなかった。





    そのような事をやっているのは、私だけでしょうか？

    思い当たる人は、IEで現物を当たってみてはいかがでしょうか


    ほんとにそうなの？
    と思った人は、Please show me it | Please return it.で確認してみてくださいね























43 When block-level non-replaced element in normal flow is preceded by a floated sibling element, the horizontal hover area of the floated element is reduced and based on the ’shrink-to-fit’ model Regression: Bug not present in IE7 Test Case Bug Ticket
45 ‘Shrink-to-fit’ width of parent based on intrinsic width of replaced child element (when ‘width’ is specified as ‘auto’) is wrongly retained when value of max-width of child is smaller than its intrinsic width Regression: Bug not present in IE7


Credit to the_dees for originally reporting this

 Test Case Bug Ticket

TOP