获取靠近文档边框的选定文本的边界矩形时 ie/edge 的奇怪结果
Odd results from ie/edge when getting bounding rect of selected text close to document border
基本fiddle：https://jsfiddle.net/p6790wv9/
当尝试获取 selected 文本的边界矩形时，在 Firefox 或 Chrome 中一切都按预期工作，但在 IE 和 Chrome 上使用相同的代码我遇到了奇怪的问题select连续输入最后一个字*时的结果。
例如，这是在 Firefox 中 select 在第一行中输入最后一个单词时的边界矩形：
{
x: 552.4166870117188,
y: 28.5,
width: 40.866668701171875,
height: 19,
top: 28.5,
right: 593.2833557128906,
bottom: 47.5,
left: 552.4166870117188
}
这是 IE 11 的结果：
{
bottom: 63.199996948,
constructor: ClientRect {...},
height: 36.799995422,
left: 8, // This is wrong!
right: 597.23999023,
top: 26.399999618,
width: 589.23999023 // ??
}
这是获取前两个的js代码：
var selection = window.getSelection();
if (selection && selection.toString() !== "") {
rect = selection.getRangeAt(0).getBoundingClientRect();
console.log(rect);
}
我正在确保 selection 不包含下一行中的任何单词（我只需双击该单词即可 select 它）。
这种行为是known/expected吗？我错过了什么吗？
编辑：
*当我写一行的最后一个字时，我的意思是靠近文档右边框的文本，抱歉来晚了o\
第一个问题是浏览器显然具有不同的默认样式，并且您没有在要创建范围的文本上指定任何 CSS。
如果您指定字体大小和行高并将通配符 pardding 和边距设置为 0，则数字开始变得更接近。
然而，有些事情的解释不同。
例如，8pt 字体和 12pt 行高在 IE Edge 中给出了 15 或 16px 的矩形高度（如预期的那样）。但是 FireFox 将矩形高度设置为 12 到 13px 高度。我不确定为什么它会变化一个像素，但很明显 IE 的高度是基于行高而 Firefox 的高度是基于字体的大小。
重点是每个浏览器都在使用自己的计算。
document.getElementById("lorem").addEventListener("mouseup", mouseup);
function mouseup() {
selection = window.getSelection();
if (selection && selection.toString() !== "") {
rect = selection.getRangeAt(0).getBoundingClientRect();
console.log(rect);
}
}
* {margin:0px;padding:0px;}
#lorem {
font-size:8pt;
line-height:12pt;
font-family:arial;
}
<body>
<div id="lorem">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium mauris eu turpis rhoncus, et dictum nunc eleifend. Nullam ultricies iaculis lorem, eget faucibus purus ornare et. Aenean et tortor elementum, commodo urna sed, sollicitudin augue. Integer
pharetra iaculis augue, vitae vulputate magna pulvinar ac. Curabitur pretium augue eu mi gravida ultricies. Ut semper luctus nisl a pretium. Aliquam at lacus vel justo porttitor rhoncus sit amet quis mi. Integer ac enim condimentum, malesuada
massa ut, fermentum lacus. Nullam laoreet elit eu diam lacinia euismod. Nullam nec aliquet mauris, et maximus erat. Proin in ex justo. Aliquam dictum nisl vitae molestie tempor. Quisque id turpis at metus dictum ultrices in ac augue. Fusce tempus
tincidunt sem at commodo. Donec dapibus erat sed finibus consequat. Nullam et nisi lacus. Sed diam quam, faucibus vulputate egestas a, consequat a enim. Donec congue velit molestie, vulputate ante quis, finibus odio. Integer et erat sed ligula
egestas ornare sit amet quis nunc. In hac habitasse platea dictumst. Morbi feugiat libero nec lacus elementum malesuada. Fusce dictum turpis velit, in suscipit nibh tincidunt ut. Sed viverra tellus risus, vel laoreet augue lobortis nec. Suspendisse
tincidunt semper ante. Vestibulum sodales risus posuere enim placerat, ut convallis tortor mollis. Curabitur vitae dictum tortor. Curabitur pellentesque, enim eu malesuada placerat, nibh nulla iaculis mi, et vestibulum lorem metus vitae eros.
Ut nec ipsum in libero volutpat placerat. Suspendisse feugiat quam eu mauris elementum, sit amet venenatis velit malesuada. In iaculis eu odio id elementum. Curabitur nec augue ut turpis volutpat auctor ac non nunc. Sed posuere, purus quis accumsan
aliquam, mi sapien ultricies augue, sed bibendum nisl nibh id nulla. Aliquam fermentum elit ac condimentum laoreet. Sed pharetra elit gravida metus vulputate, a pharetra magna finibus. Aenean tincidunt orci sed libero sollicitudin cursus. Donec
sapien nisl, molestie non elementum et, efficitur ut lectus. Nulla scelerisque non arcu et sodales. Aliquam nisi neque, fermentum non arcu in, efficitur fermentum lorem. Proin laoreet magna lorem, a molestie leo sollicitudin efficitur. In hendrerit
purus et nulla lobortis, eget efficitur nisl aliquet. Donec nisl erat, tempus hendrerit lorem iaculis, varius feugiat purus. Aenean ac dolor eget ipsum blandit iaculis vel sed justo. Mauris tortor tortor, interdum vitae lectus id, ultricies vulputate
nibh. Cras convallis, risus eget semper scelerisque, erat urna tincidunt nisl, vel ultricies dui neque a felis. Pellentesque ut ligula vitae tortor tincidunt pellentesque in id nunc. Ut ac dictum quam. Nulla pretium commodo libero, quis tempor
mi pulvinar ac. Aliquam sagittis ex arcu, a scelerisque urna commodo in. Curabitur pharetra posuere efficitur. Mauris blandit urna vel libero euismod faucibus. Pellentesque laoreet magna ex. Vivamus commodo orci et commodo egestas. Nulla vel dapibus
libero.
</div>
</body>
基本fiddle：https://jsfiddle.net/p6790wv9/
当尝试获取 selected 文本的边界矩形时，在 Firefox 或 Chrome 中一切都按预期工作，但在 IE 和 Chrome 上使用相同的代码我遇到了奇怪的问题select连续输入最后一个字*时的结果。
例如，这是在 Firefox 中 select 在第一行中输入最后一个单词时的边界矩形：
{
x: 552.4166870117188,
y: 28.5,
width: 40.866668701171875,
height: 19,
top: 28.5,
right: 593.2833557128906,
bottom: 47.5,
left: 552.4166870117188
}
这是 IE 11 的结果：
{
bottom: 63.199996948,
constructor: ClientRect {...},
height: 36.799995422,
left: 8, // This is wrong!
right: 597.23999023,
top: 26.399999618,
width: 589.23999023 // ??
}
这是获取前两个的js代码：
var selection = window.getSelection();
if (selection && selection.toString() !== "") {
rect = selection.getRangeAt(0).getBoundingClientRect();
console.log(rect);
}
我正在确保 selection 不包含下一行中的任何单词（我只需双击该单词即可 select 它）。
这种行为是known/expected吗？我错过了什么吗？
编辑： *当我写一行的最后一个字时，我的意思是靠近文档右边框的文本，抱歉来晚了o\
第一个问题是浏览器显然具有不同的默认样式，并且您没有在要创建范围的文本上指定任何 CSS。
如果您指定字体大小和行高并将通配符 pardding 和边距设置为 0，则数字开始变得更接近。
然而，有些事情的解释不同。
例如，8pt 字体和 12pt 行高在 IE Edge 中给出了 15 或 16px 的矩形高度（如预期的那样）。但是 FireFox 将矩形高度设置为 12 到 13px 高度。我不确定为什么它会变化一个像素，但很明显 IE 的高度是基于行高而 Firefox 的高度是基于字体的大小。
重点是每个浏览器都在使用自己的计算。
document.getElementById("lorem").addEventListener("mouseup", mouseup);
function mouseup() {
selection = window.getSelection();
if (selection && selection.toString() !== "") {
rect = selection.getRangeAt(0).getBoundingClientRect();
console.log(rect);
}
}
* {margin:0px;padding:0px;}
#lorem {
font-size:8pt;
line-height:12pt;
font-family:arial;
}
<body>
<div id="lorem">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium mauris eu turpis rhoncus, et dictum nunc eleifend. Nullam ultricies iaculis lorem, eget faucibus purus ornare et. Aenean et tortor elementum, commodo urna sed, sollicitudin augue. Integer
pharetra iaculis augue, vitae vulputate magna pulvinar ac. Curabitur pretium augue eu mi gravida ultricies. Ut semper luctus nisl a pretium. Aliquam at lacus vel justo porttitor rhoncus sit amet quis mi. Integer ac enim condimentum, malesuada
massa ut, fermentum lacus. Nullam laoreet elit eu diam lacinia euismod. Nullam nec aliquet mauris, et maximus erat. Proin in ex justo. Aliquam dictum nisl vitae molestie tempor. Quisque id turpis at metus dictum ultrices in ac augue. Fusce tempus
tincidunt sem at commodo. Donec dapibus erat sed finibus consequat. Nullam et nisi lacus. Sed diam quam, faucibus vulputate egestas a, consequat a enim. Donec congue velit molestie, vulputate ante quis, finibus odio. Integer et erat sed ligula
egestas ornare sit amet quis nunc. In hac habitasse platea dictumst. Morbi feugiat libero nec lacus elementum malesuada. Fusce dictum turpis velit, in suscipit nibh tincidunt ut. Sed viverra tellus risus, vel laoreet augue lobortis nec. Suspendisse
tincidunt semper ante. Vestibulum sodales risus posuere enim placerat, ut convallis tortor mollis. Curabitur vitae dictum tortor. Curabitur pellentesque, enim eu malesuada placerat, nibh nulla iaculis mi, et vestibulum lorem metus vitae eros.
Ut nec ipsum in libero volutpat placerat. Suspendisse feugiat quam eu mauris elementum, sit amet venenatis velit malesuada. In iaculis eu odio id elementum. Curabitur nec augue ut turpis volutpat auctor ac non nunc. Sed posuere, purus quis accumsan
aliquam, mi sapien ultricies augue, sed bibendum nisl nibh id nulla. Aliquam fermentum elit ac condimentum laoreet. Sed pharetra elit gravida metus vulputate, a pharetra magna finibus. Aenean tincidunt orci sed libero sollicitudin cursus. Donec
sapien nisl, molestie non elementum et, efficitur ut lectus. Nulla scelerisque non arcu et sodales. Aliquam nisi neque, fermentum non arcu in, efficitur fermentum lorem. Proin laoreet magna lorem, a molestie leo sollicitudin efficitur. In hendrerit
purus et nulla lobortis, eget efficitur nisl aliquet. Donec nisl erat, tempus hendrerit lorem iaculis, varius feugiat purus. Aenean ac dolor eget ipsum blandit iaculis vel sed justo. Mauris tortor tortor, interdum vitae lectus id, ultricies vulputate
nibh. Cras convallis, risus eget semper scelerisque, erat urna tincidunt nisl, vel ultricies dui neque a felis. Pellentesque ut ligula vitae tortor tincidunt pellentesque in id nunc. Ut ac dictum quam. Nulla pretium commodo libero, quis tempor
mi pulvinar ac. Aliquam sagittis ex arcu, a scelerisque urna commodo in. Curabitur pharetra posuere efficitur. Mauris blandit urna vel libero euismod faucibus. Pellentesque laoreet magna ex. Vivamus commodo orci et commodo egestas. Nulla vel dapibus
libero.
</div>
</body>