2012-02-27 58 views
1

我使用jQuery UI疊加的div。該HTML看起來像這樣:IE7,懸停div的只有鼠標反應在邊境

<div id="s7Wrapper" style="position: relative; width: 722px; height: 500px; text-align: center; margin-left: 39px; overflow-x: hidden; overflow-y: hidden; pointer-events: auto; "> 
      <div id="center"> 
       <img class="s7urlloading" src="3.gif" style="position: absolute; width: 32px; height: 32px; z-index: 4000; margin-left: 344.94701910014567px; margin-top: 233.99999999999997px; display: none; "> 
       <img class="s7url" src="'http://google.com" style="left: 0px; top: 0px; height: 499.99999999999994px; width: 721.8940382002913px; "> 
      <div id="tooltip" class="text_7 ui-draggable" style="position: absolute; width: 247px; height: 53px; left: 20px; top: 403px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: white; border-right-color: white; border-bottom-color: white; border-left-color: white; border-image: initial; "></div> 
<div id="tooltip" class="text_6 ui-draggable" style="position: absolute; width: 246px; height: 33px; left: 22px; top: 353px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: white; border-right-color: white; border-bottom-color: white; border-left-color: white; border-image: initial; "></div> 
<div id="tooltip" class="text_5 ui-draggable" style="position: absolute; width: 248px; height: 51px; left: 20px; top: 291px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: white; border-right-color: white; border-bottom-color: white; border-left-color: white; border-image: initial; "></div> 
</div> 
</div> 
</div> 

這些UI,可拖動的div只會做出反應鼠標懸停時,我直接把我的鼠標指針的1px的邊界。這隻發生在IE中。

回答

3

的問題是通過將一個1x1透明100%的寬度×100%的高度爲png到的div解決。顯然,如果div中沒有​​某些內容,IE不會將div識別爲可懸停的元素。

+0

作爲回答,你應該紀念這個。 – 2012-12-21 14:07:36

+0

嘗試了一大堆其他解決方案,但這是唯一的工作,即使在IE10 – commonpike 2013-05-26 13:02:03