I need to make tiles from canvases (canvas), which have a maximum width of 320px, and the height is calculated automatically. All browsers cope with this normally (even Edge), but Internet Explorer 10 for some reason uses absolute height, not relative. Example: https://jsfiddle.net/gok0j65n/

<div class="table-list"> <div class="table-item"> <div>Canvas #1</div> <canvas width="800" height="600"></canvas> </div> <div class="table-item"> <div>Canvas #2</div> <canvas width="800" height="600"></canvas> </div> </div> .table-list { text-align: center; } .table-item { display: inline-block; max-width: 320px; background: yellow; } canvas { display: block; margin: 0 auto; width: 100%; } canvas { background: url('http://cdn.htpcbeginner.com/images/2016/10/Discovery-Channel-Youtube-featured.jpg') no-repeat 50% 50%; background-size: 92.5% 66.666666666666666%; }

This is how the result looks like in Internet Explorer 10: Result in Internet Explorer 10

Is there any way to solve this problem with CSS?

    1 answer 1

    For normalization I use the following styles:

     img, svg, embed, object, iframe, video, audio, canvas { vertical-align: middle; max-width: 100%; height: auto; border: 0; }