3

これが私のFaceletsファイルです：

<!DOCTYPE html>
<html lang="en"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">

<h:head>
    <title>Simple JSF Facelets page</title>
</h:head>

<h:body>
    Place your content here!
    <dialog>
        <dt>Sam</dt>
        <dd>Knock, Knock.</dd>
        <dt>Eric</dt>
        <dd>Who's there?</dd>
        <dt>Sam</dt>
        <dd>Justin.</dd>
        <dt>Eric</dt>
        <dd>Justin who?</dd>
        <dt>Sam</dt>
        <dd>Justin time for dinner!</dd>
    </dialog>
</h:body>
</html>

ブラウザに表示されるのは

ここにコンテンツを配置してください。

このファイルのソースを確認すると、chrome で次のように表示されます。

<!DOCTYPE html>
<html lang="en"><head>
    <title>Simple JSF Facelets page</title></head><body>
Place your content here!
<dialog>
    <dt>Sam</dt>
    <dd>Knock, Knock.</dd>
    <dt>Eric</dt>
    <dd>Who's there?</dd>
    <dt>Sam</dt>
    <dd>Justin.</dd>
    <dt>Eric</dt>
    <dd>Justin who?</dd>
    <dt>Sam</dt>
    <dd>Justin time for dinner!</dd>
</dialog>
<ul id="javax_faces_developmentstage_messages" title="Project Stage[Development]: Unhandled Messages"></ul></body>
</html>

ソース コードから、有効な html5 ファイルである必要があるように見えますか? しかし、現在、ダイアログタグにあるはずのコンテンツが表示されませんか?

4

2 に答える 2

9

以前にタブを使用したことはありませんdialogが、Chrome に組み込まれている DOM とスタイルを調べたところ、デフォルトで要素がに設定されているように見えますdisplay: none;

dialog:not([open]){ display: none; }

したがって、これをページに表示するには、スタイルを設定する必要があります。

dialog{ display: block; }

アップデート

また、要素のopen属性を使用できますdialog

<dialog open>....</dialog>
于 2013-03-18T22:11:22.440 に答える
2

要素でopen属性を使用するdialog

<dialog open>....</dialog>

デフォルトでは、要素はに設定されていますdisplay: none;

dialog:not([open]){ display: none; }

また、現時点では、この機能はすべてのブラウザで利用できるわけではありません。たとえば Chrome では、chrome://flags/#enable-experimental-web-platform-features を有効にする必要があります。

(これは、Tim B James の回答を大幅に編集したバージョンです)。

于 2013-09-19T19:53:26.063 に答える