javascript - 相邻 HTML div 中的两个 float 图表导致问题

Question

我编写了一个 jquery 插件，它使用 Flot 将 HTML 表格转换为图表。 HTML 是从 XSLT 生成的，在 XSLT 中我有以下代码来调用我的插件。此代码尝试在 blah1 和 blah2 HTML div 中并排显示两个图表(每个 div 一个):

<div id="blah1" style="width:50%;height:100px;float:left;position:relative; padding: 0px">
    <script language="javascript" defer="true">
        <xsl:comment>
            <![CDATA[$(document).ready($('#blah1').myPlugin()));]]>
        </xsl:comment>
    </script>
</div>

<div id="blah2" style="width:50%;height:100px;float:right;position:relative; padding: 0px">
    <script type="javascript" defer="true">
        <xsl:comment>
            <![CDATA[$(document).ready($('#blah2').myPlugin()));]]>
        </xsl:comment>
    </script>
</div>

通过浏览器查看时，生成 HTML 的方式存在问题。左边的 div (blah1) 正确生成了 HTML，包含 Canvas 元素和所有内容(并在浏览器中显示图表)，但是右边的 div(blah2) 生成了以下内容:

<script type="javascript" defer="true">
    <!--$(document).ready($('#blah2').myPlugin());   //-->
</script>

知道这里发生了什么吗？为什么一个 div 工作而另一个不工作..？还有一个奇怪的事情是出现在blah1中的图表实际上是应该出现在blah2中的图表。 blah2图表覆盖了blah1中代码绘制的图表。如果我注释掉 blah 2 jquery 调用，则 blah1 div 会正确显示预期的图表。

Answer 1

正如@PabloPozo 所说，看起来语言属性已贬值，将您的两个脚本标签都更改为

<script type="text/javascript" defer="true">

</script>