Question

我注意到resizable（）以不同于div的方式处理img。你可以在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显示从内联更改为块，在其后面添加句柄，然后在图像和句柄周围放置一个ui包装：

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

有人理解为什么需要这种不同的治疗方法吗？

由于

Answer 1

来自fine <img> specification：

允许的内容

空（空元素）

您无法将任何放在<img>中，因此，您不能将句柄<div>放在<img>中。所以，jQuery-UI用<img>紧紧包裹<div>，以便它可以将句柄放在某处。

有趣的是，如果你设置一个可调整大小的<span>，jQuery-UI会将句柄<div>放在<span>内，即使这是无效的HTML。一个<span> can contain短语内容，短语内容由短语元素和字符数据（即文本）组成;如果我们查看phrasing elements是什么，您将无法在该列表中找到<div>，<div>是flow element，而不是短语元素。

我称之为jQuery-UI中的一个错误，他们真的应该使用<span>来处理句柄，因为你可以将A <span>放在任何允许孩子的内容中。 OTOH，规范的某些部分在现实生活中处理得比其他部分更严格，所以这可能不会在现实世界中爆发。

为什么resizable（）对于图像的行为与对div的行为不同？

1 个答案: