3

我在将Inspiritas作为 Ember 应用程序时遇到问题。index.html 如下所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <meta name="author" content="me">
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="shortcut icon" href="favicon.ico">
        <link href="inspiritas.css" rel="stylesheet">
    </head>

    <body>
        <script type="text/x-handlebars">
            <div class="navbar navbar-static-top navbar-inverse">
                <div class="navbar-inner">
                    <div class="container">
                        ...
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row-fluid">
                    <div class="span3">
                        ...
                    </div>
                    {{outlet}}
                </div>
            </div><!-- /container -->
        </script>

        <script type="text/x-handlebars" id="dashboard">
            <div class="span9" id="content-wrapper">
                <div id="content">
                    <section id="tables">
                        ...
                    </section>
                </div>
            </div>
        </script>

首先，它不会为<div class="container">（不是导航栏中的那个）加载 CSS。相反，它继承自 body.ember-application，并在此过程中丢失了所有 CSS。不过，这只发生在这个容器上。我可以将其缩小到的唯一一点是这里的一些自定义样式：

body > .container {
    // Color the whole container like the sidebar to fix faux columns
    background: url('images/sidebar_bg.png') repeat @sidebarBackground;

    .border-radius(@borderRadiusLarge);

    // Make some space, eh.
    margin-top: 40px;
    margin-bottom: 40px;
}

更新：嗯，我不知道为什么，但是后来一个类名发生了变化，一切都变得一团糟，一切都失去了它的风格。

4

1 回答 1

4

您粘贴的 CSS 规则使用后代选择器，这意味着只有在元素container正下方的类的body元素才会被设置样式。但是当 Ember 插入 Handlebars 模板时，它会通过 View 包装它们，从而创建另一个中间 DIV。我猜这是您的样式没有出现的原因。

于 2013-04-10T00:28:07.197 回答