Question

我正在寻找以下问题的解决方法：

当文档处于RTL模式时，当我尝试将getBoundingClientRect()用于带边框<span id="hello_id" style="border-bottom:dotted 1px">helo</span>的范围时，我会收到无效值。

以下代码显示了一个示例：

<!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>

警告显示＆＃34;左：-621右：-593＆＃34;，在IE6和IE7中

当我删除＆＃34;方向：rtl＆＃34;来自Body的样式或样式属性，我得到了合理的正值。

如何解决此问题：即如何在rtl文档中创建带边框的跨度并具有正确的边界矩形？或者可能生成没有此属性的边框？

Answer 1

解决方案是将一个跨度放在另一个内部，给内部一个边框样式并测量外部：

<p id='xxx' style="text-align:center"><span id="hello_id" ><span style="border-bottom:dotted 1px">hello</span></span></p>

比它有效。

需要在IE6和IE7中以RTL模式执行span的无效getBoundingClientRect（）的变通方法

1 个答案: