iframe zoom issue

Question

Я пытаюсь получить кросс-браузер CSS, чтобы работать, но все, что я нашел здесь, не работает для меня.

Вот что у меня есть:

HTML

<div id="themeframe"> 
<div class="themeframe-overlay"></div> 
<iframe src="/index.php"></iframe> 
</div> 

CSS

#themeframe{ 
position:relative; 
width:520px; 
height:400px; 
margin-top: 20px; 
border: none; 
overflow: hidden; 
} 

#themeframe .themeframe-overlay{ 
position:absolute; 
z-index:95; 
left:0;top:0; 
height:100%;width:100%; 
background:#fff; 
opacity:0; 
filter: alpha(opacity = 0); 
} 


#themeframe iframe { 
width:1040px; 
min-height: 800px; 
overflow: hidden; 
-moz-transform: scale(0.5); 
-moz-transform-origin: 0 0; 
-o-transform: scale(0.5); 
-o-transform-origin: 0 0; 
-webkit-transform: scale(0.5); 
-webkit-transform-origin: 0 0; 
-ms-transform: scale(0.5); 
-ms-transform-origin: 0 0; 
margin: 0; 
padding:0; 
border: none; 
} 

Что я пытаюсь достичь? У меня есть div 520 x 400, который я хочу заполнить 50% масштабированной версией веб-страницы. Как показано выше, у меня есть проблемы в IE, где div/iframe - правильный размер, но веб-страница внутри - 100%, а не 50%. Это работает в любом другом браузере. Если я добавлю зум: 0,5; в iframe css, он исправляет его в IE, но прерывает его в chrome.

У меня возникли проблемы с тем, чтобы это работать в IE, Chrome, Safari и Firefox в одно и то же время.

Любые мысли?

Answer 1

Нашел ответ, который по крайней мере сработал для меня. Часть этого ответа использовали следующие шаги found here.

Во-первых, организовать свой HTML как это (я плохо устраивая код на этом сайте):

<div id="themeframe"> 
    <iframe src="/index.php" id="frame" width="794" height="1550"></iframe > 
</div> 

Тогда CSS выглядит следующим образом :

#themeframe { 
    overflow: hidden; 
    position: relative; 
    width:800px; 
    height:850px; 
    -ms-zoom: 0.75; 
} 


#frame { 
    position: absolute; 
    overflow-x: hidden; 
    top: -300px; 
    -moz-transform: scale(0.75); 
    -moz-transform-origin: 0 0; 
    -o-transform: scale(0.75); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.75); 
    -webkit-transform-origin: 0 0; 

изменения, которые я укажу являются:

1. Я завернул iframe в div называется themeframe

2. Я дал iframeid, чтобы мы могли стиль его в CSS.

3. Я использовал -ms-zoom на обертке div themeframe не в пределах iframe. Это связано с тем, что IE будет масштабировать весь iframe до вашего размера zoom, а не содержимого внутри него (что и делает Chrome и Firefox). Также важно использовать -ms-zoom в CSS, а не просто zoom, так как Chrome сойдет с ума и обратит внимание на zoom и -webkit, если вы не сделаете различие ms.

Надеюсь, это поможет. Он работает для меня в Chrome, FF и IE8.