0

我注意到当我将我的 html 代码移植到 Django 模板中时，html 元素的宽度会发生一些变化。这是正在发生的事情（请参阅下面的 HTML 代码）：

  1. 我定义了 jQuery 对象并赋予它 css 属性宽度 = 498px。
  2. 我立即打印出（使用 JS 警报命令）宽度属性，它仍然是 498 像素，正如预期的那样。
  3. 我将对象附加到 $("body")
  4. 我再次打印出对象的css宽度属性，将其更改为497.7665px。

所以看起来问题是在将对象附加到“body”期间发生的。

当我只是从没有 Django 模板的文件中加载它时，完全相同的代码没有这个问题。

为什么会发生这种情况，有什么办法可以解决吗？谢谢。

编辑：最后我能够隔离问题。下面是 HTML 代码。就像我说的那样，如果您尝试将其直接加载到浏览器中，则两个警报（在放置到“body”之前和之后）都会按预期为您提供 width=498px。

但是，如果您将其设置为 Django 模板并使用 Django 开发服务器运行，则第二个警报（放置到“body”之后）会根据浏览器的不同给您一个稍微不同的数字：Firefox 给出 497.76666px，IE 给出 498.1px。我没有检查其他浏览器。

需要注意的是，css 属性（“left”、“top”、“width”、“height”、“border-width”、“background-color”、“border-style”）的组合显示问题。如果您至少删除其中一个，问题就会消失。

如果您碰巧知道发生了什么和/或可行的解决方法是什么，我将不胜感激。谢谢。这是代码：

<!doctype html>
<html lang="en">
<head>

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
    $(function() {
        var my_element = $("<div/>")
                             .addClass("my_element")
                             .attr("id", "my_element1")
                             .css("position", "absolute")
                             .css("left", "0px")
                             .css("top", "0px")
                             .css("width", "498px")
                             .css("height", "300px")            
                             .css("border-width", "1px")
                             .css("background-color", "#999966")
                             .css("border-style", "solid");

            alert("width:" + my_element.css("width"));  

            $("body").append(my_element);

            alert("width:" + my_element.css("width"));  

    });

</script>

</head>
<body>
</body>
</html>
4

0 回答 0