2

次の問題の回避策を探しています。

ドキュメントが 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>

アラートは、IE6 と IE7 の両方で「左:-621 右:-593」と表示されます。

Body の style または style 属性から "direction:rtl" を削除すると、妥当な正の値が得られます。

この問題を回避するにはどうすればよいですか?つまり、rtl ドキュメントで境界線のあるスパンを作成し、正しい境界四角形を作成するにはどうすればよいですか? それとも、このプロパティなしで境界線を生成しますか?

4

1 に答える 1

0

解決策は、1 つのスパンを別のスパンに配置し、境界線スタイルを内部のものに与え、外部を測定することでした。

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

それが機能するより。

于 2013-02-19T05:01:47.953 に答える