Question

你好HTML5和CSS新手，

我们必须为我们的最终项目创建一个兴趣页面，因此我使用了从左到右堆叠的8个图像，这些图像包含在各个div容器中，并且只有当您将鼠标悬停在照片上时才会显示标题。它在Chrome和Firefox中看起来不错，但在IE中，所有照片都无处不在。任何帮助将不胜感激：

HTML：

<section>
    <div class="interests">
            <img src="music.png" alt="Musician" id="musician">
            <p class="caption" id="musicP">I love all genres of music.</p>
    </div>
    <div class="interests">
            <img src="movies.png" alt="Popcorn" id="popcorn">
            <p class="caption" id="movieP">Favorite romance comedy is Sleepless in Seattle</p>
    </div>
    <div class="interests">
            <img src="reddit.png" alt="Reddit" id="reddit">
            <p class="caption" id="redditP">I love Reddit. I spend way too much time there.</p>
    </div>
    <div class="interests">
            <img src="reading.png" alt="Books" id="books">
            <p class="caption">I only read fiction books.</p>
    </div>
    <div class="interests">
            <img src="cooking.png" alt="Cooking" id="cooking">
            <p class="caption" id="cookingP">Favorite food is sushi</p>
    </div>
    <div class="interests">
            <img src="videogames.png" alt="Video Games" id="games">
            <p class="caption">I'm playing Animal Crossing right now.</p>
    </div>
    <div class="interests">
            <img src="football.png" alt="Football Game" id="football">
            <p class="caption">My favorite player is Peyton Manning!</p>
    </div>
    <div class="interests">
            <img src="travel.png" alt="Globe" id="travel">
            <p class="caption">I'd like to visit Germany soon.</p>
    </div>
</section>

CSS：

/*Styles for the Interests Page*/

/*Floats all the photos to the left*/
.interests {
  float: left;
}

/*Styles for individual photos*/
#cooking{
  height: 180px;
  margin-left: 100px;
}
#books{
  width: 240px;
  height: 169px;
}
#games{
  height: 180px;
}

/*Photo Caption Styles*/
.caption{
  font-size: 70%;
  visibility: hidden;
  opacity: 0;
}
.interests:hover .caption{
  visibility: visible;
  opacity: 1;
}
#cookingP{
  margin-left: 100px;
  width:200px;
}

谢谢！

Answer 1

而不是

<img src="music.png" alt="Musician" id="musician">

关闭所有图片以结束

<img src="music.png" alt="Musician" id="musician"/>

您的图片代码中缺少/

Answer 2

不要使用花车。在所有兴趣类div上的display:table标记<section>上使用display:table-cell，并使用样式display:table-row围绕行包装div。

http://www.w3schools.com/cssref/pr_class_display.asp

我的图像仅在IE 11中显示不正确

2 个答案: