TextRange offsetLeft e offsetTop quebrados no Modo de Padrões do Internet Explorer 8 (IE8)
Parece que encontrei um problema com o Internet Explorer 8 ao encontrar a posição de um intervalo de texto - por exemplo, o texto atualmente selecionado. Não encontrei nenhum relatório sobre esse problema no StackOverflow ou em outro lugar.
TextRange.offsetLeft e TextRange.offsetTop relatam o canto esquerdo e superior do intervalo e, em todos os casos que vi no IE8, estão praticamente corretos,exceto no caso em que o intervalo está dentro de um IFrame. Quando o intervalo está dentro de um IFrame, os valores de offsetLeft e offsetTop são deslocados por um valor negativo relativo à posição do IFrame em seu pai. (Veja o exemplo abaixo)
Esse problema aparece apenas quando:
O navegador é o IE8A página está no modo padrãoEsta questão nãonão aparecem quando:
O navegador é IE7 ou IE10A página está no modo quirksMinhas perguntas:
Outras pessoas podem confirmar este problema ou eu estou louco?Isso é um problema conhecido?Há alguma solução sensata ou trabalho ao redor? (Uma solução sã seria aquela em que o JS no quadro não precisa saber nada sobre sua janela pai)Obrigado.
Um exemplo do problema: (Veja a diferença no IE8 vs. IE9)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>IE8 IFrame Text Range Position Test Page</title>
<style type="text/css">
body {
font-family: Tahoma;
}
#target {
background-color: #CCC;
position: absolute;
left: 50px;
top: 50px;
}
#bullsEye {
position: absolute;
background-color: red;
width: 5px;
height: 5px;
}
iframe {
margin: 10px 75px;
}
</style>
<script type="text/javascript" charset="utf-8">
function target() {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('target'));
range.select();
var bullsEye = document.createElement('div');
bullsEye.id = 'bullsEye';
bullsEye.style.left = range.offsetLeft + 'px';
bullsEye.style.top = range.offsetTop + 'px';
document.body.appendChild(bullsEye);
document.getElementById('output').innerHTML = 'range.offsetLeft = ' + range.offsetLeft + ', range.offsetTop = ' + range.offsetTop;
}
</script>
</head>
<body>
<div id="target">Target</div>
<input type="button" value="Hit Target" onclick="target();"> <span id="output"></span>
<br><br><br><br><br>
<script>
if (window.parent == window) document.write('<iframe src="?tfr" height="150" width="500"></iframe>');
</script>
</body>
</html>