画像がIE11でダイアログの外に表示される

Question

ダイアログ内に画像を収めようとしています。クロムでは、これは完全に

動作しますが、IE11で何かがうまくいかない：

DEMO

CSS

dialog { 
    max-width: 300px; 
    height: 100px; 
    border: 2px solid #000; 
    background-color: green; 
} 

dialog img { 
    width: 80vw; 
    max-width: 100%; 
    max-height: 100%; 
} 

ので、画像は80％よりも広くすることはできませんビューポートだけでなく、dialogに設定されている300ピクセルを超えることはできません素子。

これはなぜIE11のように見えないのですか？

Answer 1

Chromeではダイアログタグのみがサポートされ、FirefoxやIEではサポートされません。詳細はhttp://caniuse.com/#feat=dialogをご覧ください。

IEでうまくいくようにいくつかの変更があります。 フィドル：https://jsfiddle.net/cuongle/oeaojswm/1/

CSS：

#demo { 
    max-width: 300px; 
    height: 100px; 
    border: 2px solid #000; 
    background-color: green; 
    padding: 10px 0; 
} 

#demo img { 

    max-width: 100%; 
    max-height: 100%; 
}