CSS-图像标题框在IE9中无法正常工作

Question

I have an image with a caption box it works fine in all the other browsers apart from Internet Explorer 9 and I'm not sure why? and how can I fix it? the images and captions overlap each other and the text go behind the image.

I have posted the code and also a demo JSFiddle .

 .caption-box { width: 100%; height: auto; display: inline; } .caption-box .imageHolder { display: inline-block; width: auto; margin: 0 auto; margin-bottom: 5px; } .imageHolder { position: relative; width: 220px; height: 150px; border: 3px solid #ddd; } .imageHolder:hover { opacity: 0.9; border: 3px solid #333; } .imageHolder img { width: 220px; height: 150px; } .imageHolder .caption { position: absolute; width: 220px; height: 27px; bottom: 0px; left: 0px; color: #ffffff; background: #333; text-align: center; opacity: 0.7; padding-top: 15px; } .imageHolder .caption a:visited, a:link { color: #fff; text-decoration: none; } .imageHolder .caption a:hover { color: #fff; text-decoration: underline; } 

 <div class="caption-box"> <a href="#"> <div class="imageHolder"> <img src="http://lorempixel.com/output/animals-qc-640-480-7.jpg" /> <div class="caption"><a href="#">Title</a> </div> </div> </a> <a href="#"> <div class="imageHolder"> <img src="http://lorempixel.com/output/animals-qc-640-480-7.jpg" /> <div class="caption"><a href="#">Title</a> </div> </div> </a> <a href="#"> <div class="imageHolder"> <img src="http://lorempixel.com/output/animals-qc-640-480-7.jpg" /> <div class="caption"><a href="#">Title</a> </div> </div> </a> <a href="#"> <div class="imageHolder"> <img src="http://lorempixel.com/output/animals-qc-640-480-7.jpg" /> <div class="caption"><a href="#">Title</a> </div> </div> </a> <a href="#"> <div class="imageHolder"> <img src="http://lorempixel.com/output/animals-qc-640-480-7.jpg" /> <div class="caption"><a href="#">Title</a> </div> </div> </a> <a href="#"> <div class="imageHolder"> <img src="http://lorempixel.com/output/animals-qc-640-480-7.jpg" /> <div class="caption"><a href="#">Title</a> </div> </div> </a> </div> 

Answer 1

You are putting div inside an anchor element. It is a rendering error: in fact IE9 does not allow to use block element inside a inline element , as for HTML4 specs.

See this answer .

HTML 4.01 specifies that <a> elements may only contain inline elements . A <div> is a block element , so it may not appear inside an <a> .

Of course you are at liberty to style an inline element such that it appears to be a block, or indeed style a block so that it is rendered inline. The use of the terms inline and block in HTML refers to the relationship of the elements to the semantic structure of the document, whereas the same terms in CSS are related more to the visual styling of the elements. If you make inline elements display in a blocky manner, that's fine.

However you should ensure that the structure of the document still makes sense when CSS is not present, for example when accessed via an assistive technology such as a screen reader - or indeed when examined by the mighty Googlebot."

Here is how IE9 sees your code: