火狐缩小闪光对象到14像素，铬和IE罚款

Firefox Shrinking flash object down to 14px, chrome and IE fine

本文关键字：铬和 IE 罚款 14像素 缩小 对象 火狐      更新时间：2023-09-26

我目前有一个脚本，可以在用户点击时显示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/是它的缩小版。

[EDIT]我发现了导致视频问题没有出现在firefox中的原因，这是transform命令（我用它来居中div本身），所以我想我必须找到一种新的方法来居中我的div。

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

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

然后你通过抓取内容并注入来加载它。在这种情况下，只需执行一个检查元素：，就可以相对直接地看到哪里出了问题

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

你好，流氓双引号。

解决这个问题，让我们还修复JS中的HTML和样式。不要那样做。把嵌入代码放在HTML中，然后从那里交换，不要使用.style.... = ...，使用类并用.classList.add和.classList.remove:切换它们

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

相关文章：