2

我注意到 resizable() 对 img 的处理方式与对 div 的处理方式不同。你可以在http://jsfiddle.net/stevea/yW8NZ/3/看到这个。当你调整 div 的大小时， resizable() 只是在 div 之后添加句柄。

<div id="box" class="ui-resizable">
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-  index: 1000;"></div>
</div>

当你调整图像大小时， resizable() 将 img 显示从 inline 更改为 block，在其后添加句柄，然后在图像和句柄周围放置一个 ui-wrapper：

<div class="ui-wrapper" style="overflow: hidden; position: relative; width: 100px; height: 79px; top: 0px; left: 0px; margin: 0px;">
    <img id="cateye" class="ui-resizable" src="http://s20.postimg.org/ddh45wqnd/t_cateye.jpg" style="resize: none; position: static; display: block; height: 79px; width: 100px;">
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>
</div>

有人明白为什么需要这种不同的治疗吗？

谢谢

4

1 回答 1

2

从精细<img>规范：

允许的内容

空（空元素）

你不能把任何东西放在里面<img>，特别是你不能把把手<div>放在里面<img>。<img>所以，jQuery-UI用 a紧紧地包裹住了，<div>这样它就可以把句柄放在某个地方。

有趣的是，如果你设置了 resizable <span>，jQuery-UI 会将句柄<div>放在里面，<span>即使那是无效的 HTML。A<span>可以包含词组内容，词组内容由词组元素和字符数据（即文本）组成；如果我们看一下什么是短语元素，你不会<div>在该列表中找到 a<div>是一个流元素，而不是一个短语元素。

我将其称为 jQuery-UI 中的错误，他们确实应该使用 a<span>作为句柄，因为您可以，AFAIK，将 a<span>放入任何允许孩子的东西。OTOH，规范的某些部分在现实生活中的处理比其他部分更严格，因此这可能不会在现实世界中爆发。

于 2013-07-21T05:48:57.557 回答