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

Question

我有一个带有标题框的图像，除了Internet Explorer 9之外，它在所有其他浏览器中都能正常工作，我不知道为什么？我该如何解决？ 图像和标题相互重叠，文本在图像后面。

我已发布了代码，还有 demo JSFiddle 。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你将div放在一个锚元素中。这是一个渲染错误：实际上IE9不允许在block内使用inline element元素，就像HTML4规范一样。

请参阅 this answer 。

  

HTML 4.01 指定<a>元素只能包含inline elements。 <div>是block element，因此它可能不会显示在<a>内。

     

当然，您可以自由地设置内联元素的样式，使其看起来像一个块，或者确实是一个块的样式，以便它以内联方式呈现。在HTML中使用术语内联和块是指元素与文档的语义结构的关系，而CSS中的相同术语更多地与元素的视觉样式相关。如果你以一种块状方式显示内联元素，那很好。

     

但是，当CSS不存在时，您应该确保文档的结构仍然有意义，例如通过屏幕阅读器等辅助技术访问时 - 或者实际上是由强大的Googlebot进行检查。“

以下是IE9如何查看您的代码：