2012-07-07 36 views
0

計算器流體佈局的問題,幫助學到很多很酷的東西,但不幸的是我堅持的東西,不知道如何研究我的出路吧....所以在這裏不用浮動問題,我希望有一個簡單的答案。與在Firefox

我已經制定了一個網站,該網站的偉大工程,就是​​我想要的,它採用了一種名爲LemmonSlider.js偉大的插件,我已經成功地使其全部呈液態佈局...差不多!

的問題是,它完美的Safari瀏覽器,iOS和Chrome,但在我測試的Firefox事情不好,很不好。我沒有在IE瀏覽器進行測試,但我能想象事情會是一樣時髦。

下面是一些簡單的代碼,給你的,我做了什麼的想法...

我在身體,HTML標籤使用最小高度已經嘗試過,但似乎並沒有幫助。

任何投入將非常感激

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
        <title>Example layout for the nice folk at stackoverflow</title> 
        <script src="http://code.jquery.com/jquery-latest.min.js" 
        type="text/javascript"></script> 
        <style type="text/css"> 
            html, body { 
                width:100%; 
                height:100%; 
                padding:0; 
                margin:0; 
                background-color:red; 
            } 
            #content { 
                position:absolute; 
                top:50%; 
                margin-top:-25%; 
                width:100%; 
                height:50%; 
                background-color:blue; 
                overflow:hidden; 
            } 
            #content ul { 
                position:relative; 
                margin:0; 
                padding:0; 
                height:100%; 
                background-color:yellow; 
            } 
            #content li { 
                list-style:none; 
                float:left; 
                height:inherit; 
                background-color:orange; 
                margin:0px 10px 0px 10px; 
            } 
            #content img { 
                height:inherit; 
            } 
        </style> 
        <script type="text/javascript"> 
            $(window).bind('resize', function() { 
                location.reload(); 
            }); 
        </script> 
    </head> 
    <body> 
        <div id="content"> 
            <ul> 
                <li> 
                    <img src="any/sized/image" /> 
                </li> 
                <li> 
                    <img src="any/sized/image" /> 
                </li> 
                <li> 
                    <img src="any/sized/image" /> 
                </li> 
                <li> 
                    <img src="any/sized/image" /> 
                </li> 
                <li> 
                    <img src="any/sized/image" /> 
                </li> 
            </ul> 
        </div> 
    </body> 
</html> 

回答

0

改變#內容

#content { 
    position:absolute; 
    top:25%; 
    width:100%; 
    height:50%; 
    background-color:blue; 
    overflow:hidden; 
} 

其他明智的...如果你不投資於你的CSS。我會完全推薦使用1140網格。其非常酷的原因,網格還帶有媒體查詢響應式設計。

希望這對你的作品

乾杯