-------test code(test.html)------------

<!DOCTYPE html>
<html>
<head>
<style>
*{padding:0px;margin:0px;}
</style>
</head>
<body style="background-color:orange;">
<b οnmοusemοve="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>

----------------

在代码行结束把元素的最后一个标签放到新行即可解决(在http://stackoverflow.com/questions/9039113/in-ie-8-in-the-document-mode-why-element-can-jump-to-the-end-of-line),如:

<b>C</b>

变成

<b>C

</b>

---------------

 

ie8文档模式的奇怪现象,前面的对象跳跃延伸到行后(只对mouse事件产生回应,click事件无效,大概有3px)_html

 

ie8文档模式的奇怪现象,前面的对象跳跃延伸到行后(只对mouse事件产生回应,click事件无效,大概有3px)_html_02

 

ie8文档模式的奇怪现象,前面的对象跳跃延伸到行后(只对mouse事件产生回应,click事件无效,大概有3px)_html_03