CSS-圖像標題框在IE9中無法正常工作

Question

我有一個帶標題框的圖像，它在Internet Explorer 9之外的所有其他瀏覽器中都可以正常工作，我不確定為什么嗎？ 以及如何解決？ 圖像和標題彼此重疊，並且文本位於圖像后面。

我已經發布了代碼，還發布了演示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

您正在將div放入錨元素中。 這是一個渲染錯誤：實際上，對於HTML4規范，IE9不允許在inline element內使用block元素。

看到這個答案 。

HTML 4.01指定<a>元素只能包含內聯元素 。 <div>是一個塊元素 ，因此它可能不會出現在<a>內部。

當然，您可以隨意設置內聯元素的樣式，使其看起來像是一個塊，或者也可以對一個塊進行樣式化，以使其內聯。 HTML中的內聯和塊術語的使用是指元素與文檔語義結構之間的關系，而CSS中的相同術語更多地與元素的視覺樣式相關。 如果使內聯元素以塊狀顯示，那很好。

但是，當不存在CSS時，例如通過屏幕閱讀器等輔助技術進行訪問時，或者確實由強大的Googlebot檢查時，您應該確保文檔的結構仍然有意義。”

IE9看到您的代碼的方式如下：