jQuery.width() 和 height() 在 IE 和 Chrome 上返回不同的值答案

【问题标题】：jQuery.width() and height() returns different value on IE and ChromejQuery.width() 和 height() 在 IE 和 Chrome 上返回不同的值
【发布时间】：2016-12-08 11:07:45
【问题描述】：

我在引导模式上显示一个 nvd3 图表。我用 css 指定了模态体的宽度和高度：

#trendModal .modal-dialog {
    width: 800px;
}

#trendModal .modal-body {
    height: 400px;
}

<div class="modal fade" id="trendModal" tabindex="-1" role="dialog" aria-labelledby="trendModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="trendModalLabel"></h4>
            </div>
            <div class="modal-body" id="trend-container">
                <svg></svg>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

但是，当我尝试获取模态框的宽度和高度时，我在 IE 和 Chrome 上得到了不同的答案：

width = $("#trendModal .modal-dialog").width(), //IE: 800, Chrome:780
height = $("#trendModal .modal-body").height(), //IE: 400, Chrome:360

看起来 Chrome 会自动扣除一些填充/边距，而 IE 不会。有谁知道这是怎么回事？如果我想统一行为，我应该怎么做？谢谢。

【问题讨论】：

您可能想尝试使用box-sizing 属性，它可能会更好地工作。

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

这应该可行：

var width = $("#trendModal .modal-dialog").outerWidth()
    height = $("#trendModal .modal-body").outerHeight();

这些为您提供元素的总高度和宽度，包括它们可能包含的任何边距和填充。

【讨论】：

【解决方案2】：

Chrome 中可能存在一个问题，即使用文档就绪触发器计算高度/宽度，这不会考虑内容如何改变宽度/高度。你试过 $(document).load(...) 吗？

【讨论】：

我在事件处理程序中调用 $.width 和 height，我在其中调用 nvd3 并显示模态对话框。我很确定当模态出现时整个页面都已加载。