Javascript Firefox OS构建块的区域部分缺少背景_Javascript_Html_Css_Firefox_Buildingblocks

Javascript Firefox OS构建块的区域部分缺少背景

javascript html css firefox

Javascript Firefox OS构建块的区域部分缺少背景,javascript,html,css,firefox,buildingblocks,Javascript,Html,Css,Firefox,Buildingblocks,我即将编写我的个人“Hello World Firefox OS应用程序”。为了与系统的一致，我想使用Mozilla提供的因为我想有可能设置一些首选项，所以我决定复制虽然示例代码在buildingfirefoxos.com上运行良好，但我自己的代码缺少一些带有封闭边栏的白色背景。我想，我正在努力正确使用构建块这是我的源代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8

我即将编写我的个人“Hello World Firefox OS应用程序”。为了与系统的一致，我想使用Mozilla提供的

因为我想有可能设置一些首选项，所以我决定复制

虽然示例代码在buildingfirefoxos.com上运行良好，但我自己的代码缺少一些带有封闭边栏的白色背景。我想，我正在努力正确使用构建块

这是我的源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <title>
            some simple app
        </title>
        <link rel="stylesheet" href="./css/util.css" />
        <link href="./style/headers.css" rel="stylesheet" type="text/css">
        <link href="./style_unstable/progress_activity.css" rel="stylesheet" type="text/css">
        <link href="./style_unstable/drawer.css" rel="stylesheet" type="text/css">

    </head>
    <body  role="application">
        <section data-type="sidebar">
            <header>
                <menu type="toolbar">
                    <a href="#content"><span class="icon icon-add">add</span></a>
                </menu>
                <h1>Title <em>(9)</em></h1>
            </header>
            <nav>
                <ul>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                </ul>
                <h2>Subtitle</h2>
                <ul>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label larger label than the </a></li>
                    <li><a href="#content">label</a></li>
                </ul>
            </nav>
        </section>
        <section role="region" id="main">
            <header>
                <a href="#content"><span class="icon icon-menu">hide sidebar</span></a>
                <a href="#main"><span class="icon icon-menu">show sidebar</span></a>
                <h1>Title</h1>
            </header>
            <progress value="80" max="100"></progress>
            <header>
                <h2>Subtitle</h2>
            </header>
            <article role="main">
                1234
            </article>
        </section>
    </body>
</html>


一些简单的应用程序
标题（9）






字幕






标题
字幕
1234

在这里您可以看到，主部分与侧栏重叠（如预期的那样），但缺少背景或隐藏侧栏的内容

我必须改变一些CSS吗？我只想使用构建块，因为当构建块适应新的样式指南时，这将帮助我减少花在更新上的时间

thx预告：）

我也有同样的问题。对我有效的解决方案是确保我在源代码中包含了更多的标记，以便CSS知道它需要处理什么

<section id="drawer" role="region">
  <article class="content scrollable header">
    ...
  </article>
</section>

...

确保你有上面的标签在那里和正确的地方（不要忘记结束标签）。您可以查看构建块源代码，以了解它们的去向