需要對IE6和IE7跨度無效getBoundingClientRect（）解決方法在RTL模式

我正在尋找一個解決方法如下問題：需要對IE6和IE7跨度無效getBoundingClientRect（）解決方法在RTL模式

當我嘗試使用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>

警報顯示「左：-621右：-593」，在這兩個IE6和IE7

當我刪除「的方向：RTL」從身體的風格或風格屬性的跨度我得到合理的正面價值。

我該如何解決此問題：即如何在rtl文檔中創建帶邊框的跨度，並且具有正確的邊界矩形？或者也許沒有這個屬性產生一個邊界？

來源

2013-02-18 Artyom

解決的辦法是把一個跨度其他內，給予邊框樣式內部一個衡量外部：

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

比它的工作原理。

來源

2013-02-19 05:01:47 Artyom

需要對IE6和IE7跨度無效getBoundingClientRect（）解決方法在RTL模式

回答

相關問題