我正在寻找解决以下问题的方法:
当我尝试使用 getBoundingClientRect() 时对于带边框的跨度 <span id="hello_id" style="border-bottom:dotted 1px">helo</span>当文档处于 RTL 模式时，我得到无效值。
下面的代码显示了一个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function show_rectangle()
{
var el = document.getElementById('hello_id');
var rec = el.getBoundingClientRect();
alert('Left:' + rec.left + ' Right:' + rec.right);
}
setTimeout(show_rectangle,2000);
</script>
</head>
<body style="direction:rtl">
<p id='xxx' style="text-align:center"><span id="hello_id" style="border-bottom:dotted 1px">hello</span></p>
</body>
</html>
警报在 IE6 和 IE7 中显示为“左:-621 右:-593”
当我从 Body 的样式或跨度的样式属性中删除“direction:rtl”时，我得到了合理的正值。
如何解决此问题:即如何在 rtl 文档中创建带边框的跨度并具有正确的边界矩形？或者可能生成没有此属性的边框？
最佳答案
解决方案是将一个跨度放在另一个跨度内，为内部跨度赋予边框样式并测量外部跨度:
<p id='xxx' style="text-align:center"><span id="hello_id" ><span style="border-bottom:dotted 1px">hello</span></span></p>
比它有效。
关于javascript - 需要在 RTL 模式下对 IE6 和 IE7 中无效的 getBoundingClientRect() 进行解决，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14932646/