#### 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) }) ```