Question

我目前有一个脚本，可以在用户点击时显示Youtube链接，这在Chrome和IE浏览器中均可正常工作，但它会在Firefox中强制每次对象高度为14像素。

.popup {
z-index: 18;
position:fixed;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%); 
-ms-transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
background-color: #4D8DBE;
border-radius: 8px;
border-style:double;
border-width:4px;
border-color: #125E98;
box-shadow: inset 1px -1px 10px 4px #125E98;
visibility: hidden;
padding:15px;
}

在用户点击后，它会显示该内容，并添加相关的嵌入代码。

function RenderVideo() {
document.getElementById("toggle").innerHTML = '<object width="720" height="405"><param name="movie" value="https://www.youtube.com/v/' + theVideoURL[Rand] + '?autoplay=1&controls=0&disablekb=1&modestbranding=1&enablejsapi=1&rel=0&showinfo=0&autohide=1&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed id="ytplayer" src="https://www.youtube.com/v/' + theVideoURL[Rand] + '?autoplay=1&playerapiid=ytplayer&controls=0&enablejsapi=1&disablekb=1&iv_load_policy=3&modestbranding=1&rel=0' + theExtras[Rand] + '&showinfo=0&autohide=1&version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="720" height="405"></embed></object>';

}

在chrome中，这正确呈现，视频在中间以15px填充弹出，但在firefox中，Div以正确的大小弹出，但对象只是隐藏在14px高的div的底部。

firefox需要能够正确呈现视频吗？

http://jsbin.com/zetoradexe/2/是它的缩小版本。

[编辑]我发现是什么导致视频问题没有出现在firefox中，而且它是变换命令（我用它来居中div本身），所以我想我必须找到一种新的方式来集中我的div。

Answer 1

这就是为什么你通常不在你的JS中放置一个很长的HTML字符串，因为JS引擎不会告诉你HTML被破坏了，就像它在这里一样。相反，你把它放在像：

<script type="text/html" id="loadtemplate">
  ...
</script>

然后通过抓取该内容并将其注入来加载它。在这种情况下，仅通过执行检查元素就可以相对直接地看到出现问题的地方：

<object "style="height: 100%;" width="720" height="405">

你好，流氓双引号。

修复它，让我们修复in-JS HTML和样式。不要那样做。将嵌入代码放在HTML中并从那里交换，不要使用.style.... = ...，使用类并使用.classList.add和.classList.remove切换它们：

http://jsbin.com/zalosurotu/2/

Firefox将flash对象缩小到14px，Chrome和IE很好

1 个答案: