如果在背景中有圖像，不能不選擇IE中的元素

對不起，我再次提出同樣的問題，因爲我沒有明確提出問題，所以沒有人能夠幫助我澄清昨天的困惑。這裏是codepen（似乎無法在ie8中打開）。我想要拖動'move-obj'，但它在IE瀏覽器（8,9,10）中不起作用（如果在後臺有圖像）。我怎樣才能使這個演示工作在IE8以上的IE瀏覽器？如果在背景中有圖像，不能不選擇IE中的元素

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style> 
    .wrap{ 
     position: relative; 
     width: 100%; 
     height: 100%; 
     background-color: #f0f0f0; 
     padding: 10%; 
    } 
    .wrap-inside{ 
     position: absolute; 
     top: 100px; 
     left: 100px; 
     width: 502px; 
     height: 502px; 
     border: 1px solid #ddd; 
    } 
    .move-obj{ 
     cursor: move; 
     position: absolute; 
     top: 100px; 
     left: 100px; 
     width: 100px; 
     height: 100px; 
     border: 1px solid blue; 
     background-color: rgba(0,0,0,0);//if I add the background, it will work correctly in IE9 IE10 
     filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00000000,endcolorstr=#00000000); //doesn't work in IE8 

    } 
    .bg{ 
     top: 102px; 
     left: 102px; 
     width: 500px; 
     height: 500px; 
     position: absolute; 
    } 
</style> 
</head> 
<body> 
<div class="wrap"> 
    <img class="bg" src="images/img1.jpg" alt="">//if this tag remove, it work correctly 
    <div class="wrap-inside"> 
     <div class="move-obj"></div> 
    </div> 
</div> 
<script src="js/jquery.min.js"></script> 
<script> 
    $('.move-obj').on('mousedown',function(e){ 
     var start_x = e.pageX; 
     var start_y = e.pageY; 
     var $that = $(this); 
     var t_left = parseInt($that.css('left')); 
     var t_top = parseInt($that.css('top')); 
     $('.wrap-inside').on('mousemove',function(e){ 
     $that.css({ 
      left: t_left + e.pageX - start_x, 
      top: t_top + e.pageY - start_y 
     }); 
     }).on('mouseup',function(e){ 
     $(this).off('mousemove'); 
     }); 
    }); 
</script> 
</body> 
</html>

來源

2016-02-27 yzajoee

向元素應用'higher z-index'試試這個...它工作正常你期望什麼？ – guradio

它仍然不起作用@guradio – yzajoee

不要重複提出問題，如果您在原始文章中「_沒有明確提出問題」_，那麼編輯原文更加清晰。 –

只需設置一個透明圖像的.move-obj背景或代替透明圖像嘗試將其設置爲url(about:blank)也應該工作。

來源

2016-02-27 03:17:09 ri0ter

好主意，謝謝 – yzajoee

如果在背景中有圖像，不能不選擇IE中的元素

回答

相關問題