我在这个 site 上有一个交互式图像 map 是这样工作的: 当用户将鼠标悬停在图像上的 6 个点之一上时，该点将扩展为一个框，可以在其中找到嵌入的 YouTube 视频。这在除 IE/edge 之外的所有浏览器中都运行良好。使用 IE，该点不能正确或平滑地扩展，并且非常“故障”。
我知道是 Iframe 搞砸了，因为我只为 6 个点中的 3 个包含了 Iframe，而这三个没有在 IE 上运行良好。
有什么办法可以阻止 IE 以这种方式运行吗？
我试图在 iframe 上 float ，但没有成功。
干杯。
编辑: 这些视频未在任何浏览器中显示的原因是它们目前在 youtube 上是私有(private)的。没关系，非私有(private)视频适用于除 IE 之外的所有内容。只是一个注释，但原来的问题仍然存在。 问题是点的扩展一点也不流畅，有时甚至不起作用(由于 IE 不同意 Iframe(出于某种原因)。
更新: 仍在尝试找出解决方案，如有任何帮助，我将不胜感激!
交互式图像的 HTML 和 CSS:
body {
max-width: 1200px;
margin: 20px auto;
padding: 0 100px;
overflow-x: hidden;
}
.description {
max-width: 600px;
margin: 0 auto;
color: rgba(229, 229, 229, 0.7);
}
div, img {
position: relative;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
<!--text-transform: uppercase;-->
font-family: "Roboto Condensed", Helvetica, sans-serif;
font-weight: 300;
}
h1 {
font-size: 36pt;
}
h2 {
font-size: 24pt;
}
h3 {
font-size: 18pt;
}
h4 {
font-size: 16pt;
}
h5 {
font-size: 14pt;
}
h6 {
font-size: 12pt;
}
p {
font-size: 12pt;
margin-bottom: 12pt;
margin-right: 12px;
margin-left: 12px;
}
strong {
font-weight: 600;
color: #e5e5e5;
}
a {
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}
#content a:link { color: #3cbeff;
font-weight: 420;
text-decoration: underline;}
#content a:visited { color: #3cbeff;
font-weight: 420;
text-decoration: underline;}
#content a:hover { color: #0077ee;} /* user hovers */
#content a:active { color: #0077ee;} /* active links */
}
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.centered-y {
position: inline-block;
width: auto;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 725px;
padding: 0px;
box-sizing: border-box;
margin: 0 auto;
text-align: center;
}
.distribution-map > img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
text-align: center;
border-radius: 20px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: rgba(26, 26, 26, 0.85);
border: 3px solid #dff3fd;
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
text-align: center;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active, .distribution-map .map-point:focus, .distribution-map .map-point:hover {
position: absolute;
margin-left: auto;
margin-right: auto;
padding: 0;
filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 400px;
height: 360px;
color: #e5e5e5;
z-index: 1;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content, .distribution-map .map-point:hover .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
float: right;
display:inline-block!important;
text-align: center;
}
.distribution-map .map-point:active .content a:hover,
.distribution-map .map-point:active .content a:active,
.distribution-map .map-point:focus .content a:hover,
.distribution-map .map-point:focus .content a:active {
color: #dff3fd;
}
</style>
<body>
<h1></h1>
<div class="distribution-map">
<img src="https://static1.squarespace.com/static/56b6eced3c44d81bd1aa7ac5/t/56f6496817110775128b832f/1458981438644/Homephoto12.png?format=1000w">
<div class="map-point" style="top:22%;left:21%">
<div class="content">
<!--<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>-->
<div class="centered-y">
<h2>Walnuts</h2>
<p>Watch the video and check the library!<br><br>
<iframe width="350" height="197" src="https://www.youtube.com/watch?v=1KyvkclOZ9U" frameborder="0" allowfullscreen></iframe>
<!-- <strong>Check out:</strong> <br>
<a href="http://www.thehealthytray.com/">This post covering more information, recipies and where you can get Walnuts</a>--></p>
</div>
</div>
</div>
<div class="map-point" style="top:23.5%;left:53%">
<div class="content">
<div class="centered-y">
<center><h2>Maca Powder</h2>
<p>Watch the video and check the library!</p>
<iframe width="350" height="197" src="https://www.youtube.com/watch?v=eIxDXncGUbo" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="map-point" style="top:26%;left:86%">
<div class="content">
<div class="centered-y">
<h2>Chia Seeds</h2>
<p>Watch the video and check the library!</p>
<iframe width="350" height="197" src="https://www.youtube.com/watch?v=_eTdjL9sRtE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="map-point" style="top:72%;left:19%">
<div class="content">
<div class="centered-y">
<h2>Quinoa</h2>
<p>Video and post date release date: Wednesday the 13th of April</p>
</div>
</div>
</div>
<div class="map-point" style="top:70%;left:51%">
<div class="content">
<div class="centered-y">
<h2>Goji berries</h2>
<p>Video and post date release date: Thursday the 14th of April</p>
</div>
</div>
</div>
<div class="map-point" style="top:71.5%;left:86.5%">
<div class="content">
<div class="centered-y">
<h2>Onion</h2>
<p>Video and post date release date: Friday the 15th of April</p>
</div>
</div>
</div>
</div>
最佳答案
将 Edge 用于 YouTube 内容和其他媒体内容时存在一些已知问题。用户需要在浏览器设置中设置“使用软件渲染而不是 GPU 渲染”。 Google 问题以获取更多信息。
希望这有帮助吗？
关于html - Youtube Iframe 嵌入代码不适用于 IE/Edge，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36388746/