не понятное отображение в IE

[full-link]
<ul class="columns">
<div class="thumbnail">
<li>
<img src="{image-1}" />
<div class="head-title">
[xfgiven_original_name]<a href="{full-link}" title="[xfvalue_original_name]">[/xfgiven_original_name]{title limit="22"}</a>
</div>
</li>
</div>
</ul>
[/full-link]

ul.columns {

margin: 0 auto;
list-style: none;
padding: 0;
}
 
ul.columns li {
position: relative;
display: inline;
float: left;
padding: 0;
}
 
ul.columns li:hover {
z-index: 99;
}
 
ul.columns li img {
position: relative;
}
 
ul.columns li:hover img {
border-radius: 3px;
z-index: 999;
}
 
ul.columns li .info {
position: absolute;
left: -10px;
top: -10px;
padding:10px 10px 10px 200px;
min-width:300px;
min-height:250px;
background-color: rgba(0, 0, 0, 0.9);
font-size: 14px;
display: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
 
ul.columns li:hover .info {
display: block;
}

.thumbnail{
display:block;
padding:4px;
line-height:20px;
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.055);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.055);
box-shadow:0 1px 3px rgba(0,0,0,0.055);
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out
}

a.thumbnail:hover{
border-color:#08c;
-webkit-box-shadow:0 1px 4px rgba(0,105,214,0.25);
-moz-box-shadow:0 1px 4px rgba(0,105,214,0.25);
box-shadow:0 1px 4px rgba(0,105,214,0.25)
}

.thumbnail>img{
display:block;
max-width:100%;
margin-right:auto;
margin-left:auto
}