0

这是关于语义-ui css 的渲染行为。

在 HTML 页面（称为 index.html）中，我有一个类似这样的 postloader：

$(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 加载的内容没有以全宽呈现（从行类继承）。它在语义类语言中只有一两列宽。但是，如果我静态填充内容（使用与通过 Javascript 函数生成的相同的 DOM 结构进行硬编码），它将以完整的方式呈现。我使用 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 回答