html - Firefox 上的 iframe 大小问题

Question

我在列表中有一个 iframe（我正在使用滑块），并且在 Chrome 上完美地设置了它的大小，但在 Firefox 上，它的大小更小。

就像这样

<ul id="slider">
    <li><iframe src="slider1-mobile.htm" style="width:320px; height:250px;"></iframe></li>
    <li><iframe src="slider2-mobile.htm" style="width:320px; height:250px;"></iframe></li>
    <li><iframe src="slider3-mobile.htm" style="width:320px; height:250px;"></iframe></li>
    <li><iframe src="slider4-mobile.htm" style="width:320px; height:250px;"></iframe></li>
</ul>

使用 Firebug，我可以看到每个 li 元素的大小为 320x250，如 css 中所述...但 iframe 切换到宽度和高度为 100%，即使我将它与我希望它们的样式属性内联320 ......无论如何，即使它是 100%，因为父级 (the <li>) 的大小为 320x250，宽度为 100% 的 iframe 应该具有 320 的宽度，因为 320 的 100% 是 320。

但它显示 iframe 真的很小，而不是它应该的大小。在 Chrome 上我可以完美地查看它。

你可以看到它： http://samlizama.com/Responsive/

我感谢任何帮助:)

这是它在 Chrome 和 Firefox 上的外观：

铬合金

火狐

使用相同的代码

Answer 1

你的问题是 main320.css 中的这个 CSS 规则：

#slider iframe{
  transform: scale(0.5);
  width:320px;
  height:250px;
}

Firefox 支持无前缀 CSS 转换，因此这会将 iframe 缩小 2 倍。Chrome 仅支持-webkit-transform，因此忽略该transform规则。

Answer 2

在 Firefox for Mac 中看起来不错！