Question

我是骷髅新手，我想尝试一个简单的网站，但我已经遇到了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之外，它在所有浏览器上都显示正常。相反，如果我使用“三分之二”作为班级，甚至“三分之二”，它就显示出来了。

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。

感谢您的帮助。

Answer 1

好的，我想出来了，出于某种原因“明确：两者”在firefox中表现不佳。所以我不得不在容器div中添加：clarfix。

立即行动！

骷髅列在Firefox中添加了奇怪的空间

1 个答案: