iframe框架的居中、滾動條、多種瀏覽器、多個分辨率下所遇到的問題

讓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

-----------------------------

可能有人會有更好的辦法解決這類問題,因此此文只供參考~~

且感悟:在頁面上元素都不是孤立的,若是一個元素屬性或顯示方式有限,就能夠考慮利用其餘元素的相關屬性。

相關文章
相關標籤/搜索