我的画布元素在InternetExplorer9&10，它的高度只有应有的一半。
画布应该是一个反应灵敏的640x480盒子，上面有一个大的红色圆圈，而不是长方形椭圆。我希望它需要一个css规范修复，但我不清楚css或javascript修复是什么。
在ie10和ie9中，它看起来是这样的：http://s7.postimg.org/4xtb6vjkr/ie10.png
chrome、firefox、safari和ie11中的代码和正确显示可以在这里看到：
http://jsbin.com/vutiqatowo/1/edit?html，css，js，输出
这是一个项目的向后兼容性要求，因此希望访问者不要使用ie10不是一个选项。
我在谷歌搜索结果中看到用height:100%替换height:auto的解决方案，但它在对我来说有问题的页面上不起作用。我发现了这个针对-ms-high-contrast的媒体查询破解，它适用于扭曲的画布显示。它不能提供平滑的缩放，但它可以正确地显示画布元素。
下面是一个小提琴的例子：http://jsfiddle.net/trents_luck/abhbmsd6/
在fiddle的例子中，媒体查询技巧可以在css的底部看到，它们读起来像这样：
@media (-ms-high-contrast: active) and (min-width: 100px),
(-ms-high-contrast: none) and (min-width: 100px)