Internet Explorer 10 上的 JqueryUI 句柄不可点击答案

【问题标题】：JqueryUI handles on Internet Explorer 10 not clickableInternet Explorer 10 上的 JqueryUI 句柄不可点击
【发布时间】：2013-02-18 14:58:36
【问题描述】：

我对 jQueryUI 可调整大小和 Internet Explorer 有疑问。我正在创建一个可调整大小的 div，其中包含一个带有一些文本的跨度。在 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

【问题讨论】：

标签： jquery jquery-ui internet-explorer-10 jquery-ui-resizable

【解决方案1】：

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

首先，我建议不要只考虑 IE 10，还要考虑早期版本的 IE（降到 7 或 8）。是的，有些人（尤其是公司计算机）陷入了石器时代。

现在在你的标题部分我要添加：

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

如果这对您有帮助，请告诉我！

【讨论】：

关于为早期版本的 IE 开发：我正在为 IE10 开发，因为不幸的是我所做的工作在很大程度上依赖于视频处理，而 IE 在这方面比其他浏览器做得更好。但幸运的是，这不是针对公共网站的，所以我可以强制用户按照我决定的方式工作 ^_^ 也就是说，我试图添加那个元，但似乎没有任何改变......
stackoverflow.com/questions/2634894/… - 看看这个和 cmets 中的链接。希望对您有所帮助
我已经阅读了 jQueryUI 网站上的文档（作为记录，我认为在某些方面有点不准确），但我不能使用 aspectRatio 属性，因为高度容器 div 是固定的。顺便说一句，如果我不在 div 中使用 span，也会发生同样的事情...
同意，在我的上一个项目中，我对 jQUI 上的文档也有一些疑虑。最近有什么进展吗？
到目前为止还没有，我也尝试过使用偏移量和边距，但这似乎不起作用。而且 IE 的开发者工具有点烦人，礼貌（尤其是与 Chrome 相比）...

【解决方案2】：

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

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

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

【讨论】：