iframe放大問題

我試圖讓跨瀏覽器的CSS縮放工作，但我在這裏找到的一切都不適合我。iframe放大問題

以下是我有：

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; 
}

什麼我想達到什麼目的？ 我有一個520 x 400格，我想填充50％的縮放版本的網頁。如上所示，我在IE中遇到問題，其中div/iframe是正確的大小，但內部網頁是100％，而不是50％。這適用於其他瀏覽器。如果我添加縮放：0.5;到iframe css，它在IE中修復它，但在Chrome中打破它。

我無法同時在IE，Chrome，Safari和Firefox中使用此工具。

有什麼想法？

來源

2012-06-13 livinzlife

找到了答案，至少爲我工作。這個問題的部分答案是使用以下步驟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;

我將指出這些變化是：

我在一個叫themeframe
div包裹iframe我給iframe的id，所以我們可以在CSS樣式。
我在themeframe的包裝div上使用了-ms-zoom而不是在iframe之內。這是因爲IE會將整個iframe擴展到您設置的zoom大小，而不是其中的內容（這是Chrome和Firefox所做的）。在CSS中使用-ms-zoom也很重要，而不是簡單地zoom，因爲如果您沒有對ms進行區分，Chrome會發瘋並注意zoom和-webkit。

希望這會有所幫助。它適用於Chrome，FF和IE8。

來源

2012-08-14 19:30:05

iframe放大問題

回答

相關問題