4

我对 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

4

2 回答 2

0

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

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

现在在您的标题部分中，我将添加：

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

让我知道这是否对您有帮助！

于 2013-02-18T15:16:08.203 回答
0

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

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

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

于 2013-02-19T18:31:51.783 回答