我在这个site上有一个交互式图像地图，其工作方式如下： 当用户将鼠标悬停在图像上的6个点中的一个点上时，该点将扩展为一个框，可以在其中找到嵌入的YouTube视频。这在除IE / edge之外的所有浏览器中都运行良好。使用IE浏览器，这一点并没有得到正确或平滑的扩展，并且非常“小问题”。
我知道iframe会弄乱它，因为我只在6点中的3个中包含了iframe，而且这三个在IE上工作得不好。
我有什么办法可以阻止IE以这种方式运行吗？
我试图漂浮在iframe上，没有运气。
干杯。
修改 视频未在任何浏览器中显示的原因是因为它们目前在youtube上处于私有状态。这不是问题，非私人视频适用于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>
答案 0 :(得分：0)
使用Edge与YouTube内容和其他媒体内容存在已知问题。用户需要设置＆＃39;使用软件渲染而不是GPU渲染＆＃39;在他们的浏览器设置。谷歌提供更多信息的问题。
希望这有帮助吗？
答案 1 :(得分：0)
我在googling后在我的网站上也遇到了同样的问题我发现以下解决方案在我的情况下工作正常。当您要从youtube嵌入任何视频时，请按照以下步骤生成不同的链接。
在enbed块中点击“显示更多”，这将显示视频的不同选项，只检查队列中的最后一个选项（如果未选中）。
Enable privacy-enhanced mode
这将为您生成一个新的URL，它将与edge和所有其他浏览器一起使用。