我设置的高度和宽度值与返回的值之间的差异是什么原因？ [英] What is the reason for the discrepancy between the height and width values I set and the ones returned?
问题描述
我是HTML和JavaScript的新手。我试图学习JavaScript的宽度（）和高度（）方法。我已经将div1的高度和宽度分别设置为100px和300px。然而，当我运行代码时，JavaScript返回的高度和宽度分别为299.666666和99.666665分别。
<！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 + = div的宽度：+ $（＃div1）。width（）+< / br>;
txt + =div的高度：+ $（＃div1）。height ）;
$（＃div1）。html（txt）;
}）;
}）;
< / script>
< style>
＃div1 {
height：100px;
width：300px;
padding：10px;
margin：3px;
border：1px纯蓝色;
background-color：lightblue;
}
< / style>
< / head>
< body>
< div id =div1>< / div>
< br>
<按钮> div的显示尺寸< /按钮>
< p> width（） - 返回元素的宽度。< / p>
< p> height（） - 返回元素的高度。< / p>
< / body>
< / html>
造成差异的原因是浏览器在缩放功能。正如 tyler durden 所说当前状态的子像素精度 - 主要浏览器：
某些浏览器无法正常缩放的原因与子像素支持无关，这是因为它们没有记住确切位置和正确舍入。换句话说，它们
实际上，对于您所指的示例，也是如此，在我的浏览器上，Safari浏览器始终只放大文本！
IE，Chrome，Opera和Firefox不仅可以计算文本，还可以计算所有元素正在使用您的网页（边框，宽度，填充等）。另外，Border影响你元素的外边缘，所以让我们看看它是否适当地舍入：
<！DOCTYPE html>< html> < HEAD> < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script> <脚本> $（window）.ready（function（）{$（button）。click（function（）{var txt =; txt + =div1的宽度：+ $（window）.width（）+ < / br>; txt + =宽度div1：+ $（＃div1）。width（）+< / br>; txt + =div1的内部左边框宽度：+ $（＃div1）.css（border-left-width）+< / br>; txt + =div1的高度：+ $（＃div1）。height（）; $ （＃div1）。html（txt）; fixSubpixelLayout（$（'＃all-cats'），$（'＃all-cats .cat'））;}）;}）; < /脚本> <风格> ＃div1 {height：100px;宽度：300px;填充：10px; margin：3px;边框：1px纯蓝色; background-color：lightblue; }< / style> < /头> <身体GT; < div id =div1>< / div> <峰; br> <按钮> div的显示尺寸< /按钮> < p> width（） - 返回元素的宽度。< / p> < p> height（） - 返回元素的高度。< / p> < / body>< / html>
在缩放我的Chrome和Firefox时发生了变化，但它不在我的IE上！因此，故障$（＃div1）。width（）的原因在每个浏览器在缩放时使用的计算方法中。
如果你想要为了解决问题，您可以使用轮廓代替边框，以便在元素内部无边框。
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?
<!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>
The reason about that discrepancy is that browsers differ on zooming functions. So as tyler durden said here:
"The reason why some browsers don't zoom properly has nothing to do with sub-pixel support, it is because they are not remembering the exact position and rounding correctly. In other words, they are prematurely rounding the position and that causes the image to be mis-aligned."
In fact, for the example you are referring too, on my browsers, safari as always zooms only text!
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>
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屋！
