css position:fixed <script> 内的标签不固定

Question

我在尝试让 .js 验证脚本保留在网页内的固定位置时遇到问题。

我的 css 代码是：

div.fixed {
position: fixed;
bottom: 0;
left: 0;
}

HTML

<div class="fixed">
<script src="http://my.gblearn.com/js/javascript.js"></script>
</div>

我可以在 div 标签内添加任何内容，它会上升到顶部并固定在左下角，但 javascript 文件只会停留在我放置它的位置网页似乎懒得遵守 .css 规则。

我想知道如何解决这个问题。谢谢大家的帮助。

Answer 1

The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user.

以上引文摘自此linkhere

script 不是内容布局 html 容器，而是用于动态执行可以 produce layout/expected 输出的代码块的目的。因此您会发现某些 css 应用于脚本标记的规则无效。

Answer 2

脚本标记未添加到 div 页脚后提及底部试试这个

div.fixed {
position: fixed;
bottom: 0;
height:50px; width:50px; background:#888;
left: 0;
}

<div class="fixed">
<h3> hii </h3>
</div>

<script src="http://my.gblearn.com/js/javascript.js"></script>

Answer 3

所以，经过多次尝试，我们发现查看我网站的源代码，我们可以看到 javascript 输出。 .js 文件显示了 id，我们制作了 .css 部分代码来显示输出信息，如下所示：

css

nav, #gblearn_message_holder {
position: fixed;
bottom: 0;
left: 0;
width: auto;
}

html

<div id="gblearn_message_holder">
<a title="Validate this page" href="javascript:void(0)" onclick="GBLEARN_TESTER.validatePage(this.form)">
<img src="http://my.gblearn.com/img/HTML5_Logo_2561.png" alt="html5 validator">
</a><a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:99px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!"></a>
<br>This page was last modified on 3/29/2017, 7:17:04 PM</div>

css position:fixed <script> 内的标签不固定

css position:fixed <script> tag within does not stay fixed

html

javascript

css

fixed