Question

我遇到了jQueryUI resizable和Internet Explorer的问题。我正在创建一个可调整大小的div，其中包含一个带有一些文本的span。在IE10中，如果文本大于容器div，则div的句柄只能在文本的上方和下方单击。在Chrome中它完美运行。

这是代码（我为测试做了jsFiddle）：

HTML

<div id="event">
    <span>some text some text</span>
</div>

CSS

#event {
    float: left;
    position: absolute;
    border: 2px solid #197ea3;
    background: #aee3f4;
    height: 16px;
    overflow: hidden;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 16px;
    padding-left: 3px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

的Javascript

$(document).ready(function() {
    $("#event").resizable({
        handles : "e"
    })
});

编辑：我添加了text-overflow: ellipsis属性并更新了jsFiddle

Answer 1

啊，是的IE是最好的（最差）。不幸的是，我在工作，所以当我回到家时，我将不得不更彻底地研究这个问题，但这里有一个快速的建议：

首先，我建议不仅要考虑IE 10，还要考虑早期版本的IE（回归到7或8）。是的，有人（尤其是公司电脑）陷入了石器时代。

现在在标题部分我会添加：

<meta http-equiv="X-UA-Compatible" content="IE-7;IE-8;IE-9;IE-10;" />

如果有帮助我，请告诉我们！

Answer 2

感谢我的老板，我找到了一个简单而优雅的解决方案：text-overflow: ellipsis。这个css属性（我不知道，对我感到羞耻）如果文本大于容器，则在文本末尾添加三个点。这些点显然不算作“标准文本”，所以不要超过句柄。

不幸的是，这不是一个完整的解决方案，因为如果文本作为容器完全是大的，那么点不会出现并且句柄仍然无法访问......

我将使用新属性编辑问题的jsFiddle链接。

Internet Explorer 10上的JqueryUI句柄不可单击

2 个答案: