1

我是骨架新手，正在尝试建立一个简单的网站，但我已经遇到了 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>

当我使用列时，它在除 Firefox 之外的所有浏览器上都显示良好。相反，如果我使用“三分之二”作为班级，甚至“三分之二”，它会显示得很好。

这是当我使用任何列时 Firefox 所做的（图片）（它在顶部 102px 处广告了一个奇怪的空间）

如果我使用“三分之二”firefox 会再次显示正常（图片）

我查看了所有代码，但无法弄清楚发生了什么。为什么列在 Firefox 中表现不佳？如果这很重要，我在 17.0.1 上。

谢谢你的帮助。

4

1 回答 1

1

好的，我想通了，出于某种原因，“clear:both”在 Firefox 中表现不佳。所以我不得不添加： clarfix 到容器 div。

现在工作！

于 2012-12-31T20:25:35.743 回答