讓iframe居中,讓iframe不顯示滾動條,而且在多個瀏覽器下和多種分辨率下不變形、都能正常顯示。忙了好久總算有了點成果,期間幾度崩潰(較菜無怪= = )。看了很多貼子,試了不少辦法,在此總結以下,供給須要的人。css
吾測試用的瀏覽器爲 IE ,TT,Firefox,一個例子以下:html
-----------------------瀏覽器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">框架
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>iframe tag test</title>
<style type="text/css">
html,body,table,tr,td,div
{
width:100%;
height:100%;
overflow:hidden;
margin:0px;
}
iframe
{
margin:0px;
width:1003px;
height:100%;
overflow:hidden;
}
</style>
</head>
<body>
<div style="text-align:center;">
<table>
<tr>
<td><iframe id="iframeId" frameborder="0" scrolling="no" src="Default.aspx" /></td>
</tr>
</table>
</div>
</body>
</html>函數
-----------------------------測試
1. 讓iframe居中,使用div套table;有人說用<center>,但在火狐中會讓iframe的height不能達到預期的100%。xml
2. 讓iframe不顯示滾動條,在屬性中直接設置屬性(scrolling="no" )無用,overflow:hidden; 把這個寫在style裏就可正常。htm
3. margin:0px; 能夠讓iframe裏引用的框架頁面裏減小元素對不齊的隱患。get
4. 使用iframe的height=「100%」 ,對火狐是沒用的,網上有人用js函數來解決,但是我用來無效果,解決的方式是讓iframe 的衆多父元素都先擁有height=「100%」的屬性 ,再對iframe的style進行設置,就能夠解決了。iframe
-----------------------------
可能有人會有更好的辦法解決這類問題,因此此文只供參考~~
且感悟:在頁面上元素都不是孤立的,若是一個元素屬性或顯示方式有限,就能夠考慮利用其餘元素的相關屬性。