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

Question

我有一个带有标题框的图像，它在除 Internet Explorer 9 之外的所有其他浏览器中都可以正常工作，但我不确定为什么？我该如何解决？图片和标题相互重叠，文字位于图片后面。

我已经发布了代码，还有一个 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-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>

Answer 1

您将 div 放在 anchor 元素内。这是一个渲染错误:事实上IE9不允许使用block inline element 中的元素，至于 HTML4 规范。

参见 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."

这是 IE9 查看您的代码的方式: