Question

我在bootstrap模式上显示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则不会。有谁知道这是怎么来的？如果我想统一行为，我该怎么办？感谢。

Answer 1

这应该有效：

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

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

Answer 2

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

jQuery.width（）和height（）在IE和Chrome上返回不同的值

2 个答案: