2012-12-31 17 views
1

我是新來的骨架,我試圖讓一個簡單的網站去,但我已經遇到了與Firefox的問題。代碼很簡單,那就是:在Firefox上添加奇怪空間的骨架列

<!DOCTYPE html> 
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> 
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> 
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> 
<head> 

    <!-- Basic Page Needs 
    ================================================== --> 
    <meta charset="utf-8"> 
    <title>Title</title> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- Mobile Specific Metas 
    ================================================== --> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

    <!-- CSS 
    ================================================== --> 
    <link href="stylesheets/fonts.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="stylesheets/base.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="stylesheets/skeleton.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="stylesheets/layout.css" media="all" rel="stylesheet" type="text/css" /> 


    <!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

    <!-- Favicons 
    ================================================== --> 
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" /> 
    <link rel="icon" type="image/x-con" href="images/favicon.ico" /> 
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> 
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> 

</head> 

<body> 
    <!-- Primary Page Layout 
    ================================================== --> 


    <div class="container" style="background-color:#399;"><!-- container START --> 




     <div class="fifteen columns" style="background-color:#CF0"> 
      ENGLISH 
     </div> 

    </div><!-- container END --> 


<!-- End Document 
================================================== --> 
</body> 
</html> 

它顯示了罰款,除了火狐所有的瀏覽器,當我使用的列。相反,如果我使用「三分之二」作爲班級,甚至「三分之二」,它顯示出來很好。

Here is what firefox does when I use any columns at all(資料圖片)(它的廣告在頂部102px一個奇怪的空間)

If I use "two thirds" firefox shows it fine again(資料圖片)

我已經通過所有的代碼看,只是無法弄清楚到底是怎麼回事。爲什麼列不能很好地與Firefox兼容?如果有問題,我在17.0.1。

感謝您的任何幫助。

回答

1

好吧,我明白了,出於某種原因「清楚:兩者」在Firefox中都不會很好。所以我必須添加:clarfix到容器div。

現在工作!