CSS

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 放在锚元素中。这是一个渲染错误：事实上 IE9 不允许在 inline element 中使用 block 元素，至于 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 查看您的代码的方式如下：

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

CSS - Image Caption Box Not Working Correctly In IE9

html

internet-explorer-9