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%，因为父级（<li>）的大小为 320x250，宽度为 100% 的 iframe 应该具有 320 的宽度，因为 100% 320 是 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 中看起来不错！