#### 1、问题描述 使用D3绘制的图表的提示框在Chrome和IE下的位置不一样。 #### 2、问题原因 提示框的`top / left`分别取`screenY / screenX`，并且提示框位置放在与svg同级的父元素下，但这个属性在IE的值与谷歌不同，因此会导致提示框位置不对。 #### 3、解决方案 提示框的`top / left` 分别取`event.clientY,pageY / event.clientX,pageX` 的值，并且提示框位置要直接放在body下，如下代码所示： ``` var svg = d3.select('body') .append('svg') .attr('width', 100) .attr('height', 100) .style('padding', '20px') svg.append('text') .text('提示框显示位置') .style('cursor', 'pointer') .on('mouseover', function(){ console.log(event) var top = event.pageY var left = event.pageX var sTop = event.screenY var sLeft = event.screenX console.log('sTop', sTop, 'sLeft', sLeft) console.log('top', top, 'left', left) }) ```