Question

-------测试代码（test.html）------------

<!DOCTYPE html>
<html>
<head>
<style>
*{padding:0px;margin:0px;}
</style>
</head>
<body style="background-color:orange;">
<b onmousemove="tip(this);">A</b> <b>B</b> <b>C</b><!--tip:when mouse is at here the same trigger the function tip()//-->
<fieldset>
    <legend id="mouseDot" style="display:block;background-color:red;height:5px;width:200px;"></legend>
    <div style="background-color:white;" id="tipTxt">onload mouseDot(red line) width=200px</div>
</fieldset>

<script>
function tip(tag) {
    mouseDot.style.width = event.x + 'px';
    tipTxt.innerHTML = 'mouse is move at x=' + event.x + ';so mouseDot(red line) width= ' + event.x + 'px';
}
</script>
</body>
</html>

测试环境是IE 9（查看模式是任何一个，但文档模式是IE 8 ）;

当您的鼠标移至A时，可以调用function tip()是正常的; 但是在移动时，为什么还会调用function tip()？

您可以通过一些屏幕截图查看我博客上发生的情况：http://hi.baidu.com/qidizi/blog/item/2322e1f7335b074e342acc46.html

提示 博客文章已被修改，应该更清楚

为什么A可以跳转到，只有3个像素大小，只对鼠标事件做出反应，点击该事件无效？

Answer 1

这是IE在此文档模式下处理空白区域的方式。如果您将fieldset标记向上移动，使其紧挨着最后一个标记，则问题就会消失。像这样：

<b>C</b><fieldset>

这不是一个很好的解决方案，但是当你看到这种奇怪的行为时它会起作用。当你不期待它时，IE秘密地插入了一些神秘的垂直间距，我也使用了这个技巧。

在ie 8文档模式中，为什么元素可以跳到行尾

1 个答案: