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を使用すると、cssに記載されているように、すべてのli要素のサイズが320x250であることがわかります...しかし、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 分の 1 に縮小されます。Chrome は のみをサポートするため、ルール-webkit-transformは無視されます。transform

Answer 2

Mac 版 Firefox では良さそうです。