IE11以外的对话框显示的图像

Question

我试图在对话框中适合图像。在Chrome完美的作品

但随着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％更宽视口，但也不能超过300px，这是在dialog上设置的元件。

任何建议为什么这看起来不怎么好在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%; 
}