Display: why display:table-cell appear under ie8? who knows?

  node.js, question

In using display: table-cell to realize horizontal and vertical centering of variable-size pictures, but in the process of realization, I found a problem: if the width: height > 1 of the picture and the original size width of the picture is larger than the width of the container, the following effect will appear in ie8
图片描述


<!  doctype html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>display</title>
 <style>
 div{
 width: 200px;
 height: 200px;
 border:1px solid black;
 float: left;
 margin-left: 200px;
 bracket
 a{
 width: 200px;
 height: 200px;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 border:1px dashed red;
 bracket
 img{
 max-width: 200px;
 max-height: 200px;
 vertical-align: middle;
 border:none;
 bracket
 </style>
 </head>
 <body>
 <!  -there is a problem with picture 328x220->
 <div>
 <a href="#">
 <img src="11.jpg" alt="">
 </a>
 </div>
 <!  -picture 720x1280 no problem->
 <div>
 <a href="#">
 <img src="22.jpg" alt="">
 </a>
 </div>
 <!  -picture 200x150 no problem->
 <div>
 <a href="#">
 <img src="44.jpg" alt="">
 </a>
 </div>
 </body>
 </html>

Who knows?

The outermost div style changes as follows:

div{
 display: table;
 table-layout: fixed;
 width: 200px;
 height: 200px;
 border:1px solid black;
 float: left;
 margin-left: 200px;
 bracket

Although img price width:100% can be solved, the picture scale problem will be out of balance! Therefore, this method is recommended!