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

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"/>

您的图片标签中缺少 /