表格單元格中iframe底部的奇怪「填充」效果

使用下面的代碼，我試圖達到以下設計：
1.表格寬度/高度必須爲80％/ 70％瀏覽器窗口。其左邊的單元格必須是全部40％。
2.右側單元格中的iframe必須填充所有可用空間，並且永遠不會超出單元格的內部邊界。表格單元格中iframe底部的奇怪「填充」效果

<!DOCTYPE html> 
<html> 
<head> 
<meta charset='utf-8' /> 
<title></title> 
<style> 
    body {width:100%} 
    iframe {width:100%; overflow:auto; margin:0px; border:solid 2px red; background-color:white; -moz-box-sizing:border-box; box-sizing:border-box} 
    table {width:80%} 
    table, td {margin:0px; padding:0px; border:solid 1px black} 
</style> 
<script src="jquery.js"></script> 
</head> 
<body> 
    <table> 
     <tbody> 
      <tr> 
       <td style="width:40%">Cell 1</td> 
       <td style="background-color:blue"> 
        <iframe src='iframe.htm'></iframe> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
<script> 
    $(window).load(function() { 
     $('iframe').height($(window).height()*0.7); 
    }); 
</script> 
</body> 
</html>

問題：
1.凡那細細的藍色「填充」在iframe的底部空間從何而來？如何強制它永遠不會出現？
2.是否有可能達到這種設計沒有：a）使用javascript; b）使用CSS box-sizing屬性？

來源

2013-05-31 lyrically wicked

iframe是「內聯框架」的簡稱，內聯元素位於周圍文本的基線上。基線允許下行者（'g'的尾部等），白色空間是下行者佔據的空間（即使沒有）。

設置display: block;對iframe應該修復填充。

編輯：這裏的an updated version of @syedmohsin's jsFiddle，它擺脫的box-sizing和解決您的80% width/70% height問題你。

CSS

html, body { 
    width:100%; 
    height: 100%; 
} 
iframe { 
    display:block; 
    overflow:auto; 
    border:solid 2px red; 
    width: 100%; 
    height: 100%; 
    margin:0; 
} 
table { 
    width:80%; 
    height: 70%; 
} 
table, td { 
    margin:0px; 
    padding: 0px; 
    border:solid 1px black; 
} 
td { 
    height: 100%; 
    padding: 0 3px 2px 0; 
} 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    td { 
     padding: 0 3px 0px 0; 
    } 
} 
@media screen\0 { 
    td { 
     padding: 0 3px 0px 0; 
    } 
}

來源

2013-05-31 03:50:42

設置display: block包括這在你的答案http://jsfiddle.net/spmwc/ –

是的，那是我的匆忙，我忘了行高和內聯元素的交互...現在我想知道如何擺脫'box-sizing：border-box' ...如果我在這個設計中使用這個屬性，有什麼需要注意的地方？ –

我認爲你應該沒問題，使用'box-sizing'，我相信所有瀏覽器都支持你需要工作的位（將邊框移動到iframe的框內）。如果你真的不想使用它，下面是一個[syedmohsin的小提琴的固定版本]（http://jsfiddle.net/spmwc/9/），它使用一些瀏覽器特定的黑客來添加額外的填充以適應邊境。 –

的iframe被當作內聯元件，所以表小區它對準到基線（並保留比特的空間供下伸）。您可以看到內嵌圖像的類似效果。

在iframe ...或line-height: 0在td

來源

2013-05-31 03:53:49 thefrontender

'line-height：0'也可以，這很好 –

表格單元格中iframe底部的奇怪「填充」效果

回答

相關問題