我设置的高度和宽度值与返回的高度之间的差异的原因是什么 [英] What is the reason for the discrepancy between the height and width values I set and the ones returned
问题描述
我是Html和JavaScript的新手。我试图学习JavaScript width（）和height（）方法。我已经将div1的高度和宽度分别设置为100px和300px。但是，当我运行代码时，JavaScript返回的高度和宽度分别是299.666666和99.666665。我设置的值和返回的值之间的差异的原因是什么。感谢您提供任何帮助！
I'm new to Html and JavaScript. I'm trying to learn JavaScript width() and height() method. I have set the height and width of div1 to 100px and 300px respectively. However, when I run the code, the height and width returned by the JavaScript is 299.666666 and 99.666665 respectively. What is the reason for the discrepancy between the values I set and the ones returned. Thanks in advance for any help!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
var txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Display dimensions of div</button>
<p>width() - returns the width of an element.</p>
<p>height() - returns the height of an element.</p>
</body>
</html>
推荐答案
这种差异的原因是浏览器在缩放时不同功能。因此，如 tyler durden 所说，这里：
The reason about that discrepancy is that browsers differ on zooming functions. So as tyler durden said here:
某些浏览器无法正确缩放的原因与子像素支持无关，因为它们不会记住正确的位置和正确舍入。换句话说，
事实上，对于你的例子，你也指的是
In fact, for the example you are referring too, on my browsers, safari as always zooms only text!
IE，Chrome，Opera和Firefox正在调整大小，不仅计算文字，还计算所有元素正在您的网页上使用（边框，宽度，填充等）。此外，边框AFFECTS您的元素的外边缘，让我们看看它是否正确圆形：
IE, Chrome, Opera and Firefox are resizing by calculating not only the text, but also, all the elements you are using on your page (border, width,padding etc). In addition, Border AFFECTS the outside edge of your element so lets see if its rounded properly:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(window).ready(function () {
$("button").click(function () {
var txt = "";
txt += "Width of div1: " + $(window).width() + "</br>";
txt += "Width of div1: " + $("#div1").width() + "</br>";
txt += "Inner left border width of div1: " + $("#div1").css("border-left-width") + "</br>";
txt += "Height of div1: " + $("#div1").height();
$("#div1").html(txt);
fixSubpixelLayout($('#all-cats'), $('#all-cats .cat'));
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Display dimensions of div</button>
<p>width() - returns the width of an element.</p>
<p>height() - returns the height of an element.</p>
</body>
</html>
在放大我的chrome和firefox，但它不是在我的IE！因此，故障$（＃div1）。width（）的原因是每个浏览器在缩放时使用的计算方法。
well border width is changed while zooming on my chrome and firefox, but it is not on my IE!! So the reason for that "malfunction" $("#div1").width() is inside the calculation method that each browser uses while zooming.
解决方案，您可以使用大纲而不是边框，以使边框与其内部元素无关。
If u want a solution for your problem you can use outline instead of border, in order to have a border unbounded from its within element.
这篇关于我设置的高度和宽度值与返回的高度之间的差异的原因是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
