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，因为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看起来不错！