有文本/內容縮減在iframe不會產生多餘的空白

我有我的網站上我已經縮小使用此question找到答案的內容的iframe的瀏覽器實例。我注意到，因爲我使用CSS縮放和轉換屬性，我得到在我的iframe的瀏覽器實例多餘的空格。填充的iframe加上它周圍的空白區域包含了我的iframe的原始寬度和高度（在被變換和縮放縮小之前）。有文本/內容縮減在iframe不會產生多餘的空白

這是結果是什麼樣子：

enter image description here

注意，灰色突出的部分是頁面的原始非iframe一部分。 iframe是頁面的非高亮部分。在原始的iframe中，縮小的瀏覽器實例和其周圍的額外空白空間。

什麼是擺脫這種空白的最好辦法還是有不同的方式，這樣不會產生多餘的空白縮減我的iframe？

這是我目前的CSS：

#iframe { 
    width: 800px; 
    height: 800px; 
    border; 1px solid black; 
    zoom: 1.00; 
    -moz-transform: scale(0.65); 
    -moz-transform-origin: 0 0; 
    -o-transform: scale(0.65); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.65); 
    -webkit-transform-origin: 0 0; 
}

和HTML：

<iframe id = 'iframe' src = 'http://www.wsj.com'></iframe>

謝謝！

來源

2012-12-19 Lloyd Banks

我創建了一個檔位，包括內嵌框架。 Div作爲iFrame的限制性邊界，消除了額外的空白區域。

CSS：

#iframe { 
    width: 1100px; 
    height: 1000px; 
    border: 1px solid black; 
    zoom: 1.00; 
    -moz-transform: scale(0.65); 
    -moz-transform-origin: 0 0; 
    -o-transform: scale(0.65); 
    -o-transform-origin: 0 0; 
    -webkit-transform: scale(0.65); 
    -webkit-transform-origin: 0 0; 
} 
#iframetest { 
    width: 715px; 
    height: 650px; 
    margin: 10px; 
    border-style: solid; 
    border-width: 10px; 
}   
#iframetest a { 
    position: absolute; 
    top: -16px; 
    right: -16px; 
}

HTML：

echo "<div id = 'iframetest' style = 'display: none'> 
      <iframe id = 'iframe' src = 'http://www.wsj.com'></iframe> 
      <a href = 'javascript: closeiframe();'><img src = 'images/exitbutton.png' 
      width = '22px' height = '22px'> 
      </a> 
     </div>";

來源

2012-12-19 20:13:25

錯字：MOZ-變換淵源考 - > MOZ變換原產地 – eflat

該代碼使得整個頁面嵌入，但可以調整寬度和高度

<head> 
<style type="text/css"> 
html {height:100%} 
body { 
margin:0; 
height:100%; 
overflow:hidden 
} 
</style> 
</head> 

<body> 
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.wsj.com" style="width:100%;height:100%"></iframe> 
</body>

來源

2012-12-19 16:10:55

有文本/內容縮減在iframe不會產生多餘的空白

回答

相關問題