我即将编写我个人的“Hello World Firefox OS App”。与系统的style guide保持一致, 我想使用 Building Blocks由 Mozilla 提供。
因为我想设置一些偏好，所以我决定复制 drawer example .
虽然示例代码在 buildingfirefoxos.com 上运行良好，但我自己的代码缺少一些带有关闭侧边栏的白色背景。我认为，我正在努力正确使用 Building Blocks。
这是我的源代码:
<!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>
在这里您可以看到，主要部分与边栏重叠(如预期的那样)，但缺少背景或其他东西，隐藏了边栏。
我必须更改一些 CSS 吗？我只想使用 Building Blocks，因为当 Building Blocks 适应新的样式指南时，这将帮助我减少花在更新上的时间......
提前致谢:)
最佳答案
我遇到了同样的问题。对我有用的解决方案是确保我包含更多源代码中的标签，以便 CSS 知道它需要采取什么行动。
<section id="drawer" role="region">
<article class="content scrollable header">
...
</article>
</section>
确保您在正确的位置放置了上述标签(不要忘记结束标签)。您可以查看 Building Blocks 源代码以了解它们的去向。
关于javascript - Firefox OS Building Blocks 区域部分的背景缺失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20662824/