Windows 8：页面上未显示 Html 标记

Question

我是 Windows 8 开发的新手，正在走 Html/Javascript 路线。我已经开始使用 Grid 模板。

为什么当我添加时，

Test Content

..到body中的内容区html（不是item模板html），我启动项目时页面上不显示文本Test Content吗？

例如。

    </head>

<div>Test Content</div>

<!-- The content that will be loaded and displayed. -->
<div class="groupdetailpage fragment">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
        <h1 class="titlearea win-type-ellipsis">
            <span class="pagetitle"></span>
        </h1>
    </header>
    <div>Test Content</div>
    <section aria-label="Main content" role="main">
        <div class="itemslist win-selectionstylefilled" title="Test Content" aria-label="List of this group's items" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
    </section>
</div>

Answer 1

建议参考default.css，并阅读网格布局（显示：-ms-grid）

.fragment {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 128px 1fr;
    display: -ms-grid;
    height: 100%;
    width: 100%;
}

.groupdetailpage.fragment 采用 100% 的宽度和高度，因此片段外部的测试内容 div 不可见。

.fragment header[role=banner] {
    // since -ms-grid-row is not defined, this element takes row 1
    /* Define a grid with columns for the back button and page title. */
    -ms-grid-columns: 39px 81px 1fr auto;
    -ms-grid-rows: 1fr;
    display: -ms-grid;
}

.fragment section[role=main] 
{
    -ms-grid-row: 2;
}

.groupdetailpage.fragment 有显示有 -ms-grid。因此，.header 和 section[role=main] 仅可见，它们分别占据第 1 行和第 2 行。

像这样更改部分将使测试内容 div 可见。

<section aria-label="Main content" role="main">
    <div>Test Content</div>
</section>

阅读网格布局会有所帮助，因为这是基于 winjs 的 Windows 商店应用程序开发的关键。