Windows 8: Html标记未显示在页面上

Question

我是Windows8开发的新手，我选择了Html/Javascript路线。我已经从Grid模板开始了。

为什么当我添加时，

测试内容

。。到正文中的内容区html (不是项模板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

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

.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;
}

网格有显示has -ms- .groupdetailpage.fragment。因此，仅分别占据行1和2的.header和sectionrole=main是可见的。

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

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

阅读网格布局将会有所帮助，因为这对基于winjs的windows store应用程序开发非常关键。