0

これは、セマンティック UI css のレンダリング動作に関するものです。

HTML ページ (index.html と呼びます) 内に、次のようなポストローダーがあります。

$(document).ready(function(){
    $("#content").load("/not-here.php", function (response, status, xhr) {
        if (status == "error") {
            var html = "<div class=\"ui large message\">" +
                       "<h1 class=\"ui huge header\">Error " + xhr.status  + " " + xhr.statusText + "</h1>" +
                       "<p>Unfortunately an error happened. We're sorry for that.</p>" +
                       "<a href=\"\" class=\"ui blue button\">View navbar docs &raquo;</a></div></div>";
            $("#content").html(html);
        }
    });
});

これにより、この DOM 要素のコンテンツが満たされます。

<div class="row">
   <div id="content" class="column padding-reset"></div>
</div>

実際に生成されるのは次のとおりです。

<div class="row">
   <div id="content" class="column padding-reset">
      <div class="ui large message">
         <h1 class="ui huge header">Error 404 Not Found</h1>
         <p>Unfortunately an error happened. We're sorry for that.</p>
         <a href="" class="ui blue button">View navbar docs »</a>
      </div>
   </div>
</div>

問題は、JavaScript で読み込まれたコンテンツが全幅でレンダリングされないことです (行クラスから継承されます)。セマンティックのような言語では、幅はわずか 1 ～ 2 列です。しかし、コンテンツを静的に埋めると (Javascript 関数を介して生成されるのと同じ DOM 構造でハードコーディングされます)、完全な with でレンダリングされます。開発にはFFとChromeを使用しています。

これまでのところ純粋な CSS であるため、動的にロードされた新しい要素は静的要素とまったく同じように動作するべきではありませんか?

4

1 に答える 1

0

バカな私…

ここにローダー関数のスクリプトを配置しました。

<div class="row">
   <div id="content" class="column padding-reset"></div>
   <script type="text/javascript">...</script> <!-- not a good choice -->
</div>

代わりにフッターのどこかに配置すると、すべてうまくいくようです。これを知っていれば、実際にはもう問題ありませんが、なぜですか？

于 2016-11-17T11:17:21.060 に答える