IE9 中的 jQuery UI 可拖动句柄非常小

Question

我一直在尝试在画布上制作一个漂亮的可编辑多边形，使用 jQuery UI 来抓取顶点并移动它们。这在 Chrome、Firefox 和 Safari 上运行良好，但在 IE9 上运行不佳。

http://jsfiddle.net/EveryoneMustWin/qNdCw/

CSS

.vertex {width:50px; height:50px; border:0px dotted red; position:absolute; display:none; z-index:0;}

#vertexcontainer .vertex {display:block;}

.vertex div.handle {width:40px; height:40px; position:relative; left:-20px; top:-20px; border:1px solid red; border-radius:20px;z-index:1; opacity:0.5;}

.currenthandle {width:40px; height:40px; border:1px solid red; position:absolute; background-color:#fc0;}

代码

$( ".vertex" ).draggable({
    stack: "div",
    snap: true,
    handle: "div.handle",
    start: function() {
        $(".currenthandle").removeClass("currenthandle");
        $(this).children("div.handle").addClass("currenthandle");
    },
    drag: function() {
        drawPoly();
    },
    stop: function() {
        drawPoly();
    }
});

顶点手柄的可拖动区域似乎很小，如果幸运的话，您可以通过单击手柄的边框来选择它。一旦您选择了顶点，就可以很好地拖动它们，因此核心可拖动行为不是问题。

我的猜测是 jQuery UI 将“.vertex div.handle”的 element.style 设置为不合适的设置。还是 CSS3 的 IE9 问题？在没有元素检查器的情况下，我不太擅长在 IE 中调查这类问题。感谢您的任何提示！

Answer 1

AFAICT 的问题是 IE 会忽略鼠标单击没有可点击“内容”的元素部分。在这种情况下，您可以添加一个已定义的background-color，然后神奇地 IE 就可以了：

.vertex div.handle {
    width:40px; 
    height:40px; 
    position:relative; 
    left:-20px; 
    top:-20px; 
    border:5px solid red; 
    border-radius:20px;
    z-index:1; 
    opacity:0.5; 
    background-color: #ddd;
}

http://jsfiddle.net/qNdCw/6/

如果您不喜欢背景的不透明度，我认为您可以使用设置为背景的透明图像来“欺骗”它。