与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％，但也不能超过dialog元素上设置的300px。

为什么IE11看起来不那么好？

Answer 1

Dialog标记仅支持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%;
}