爲什麼resizable（）對圖像的行爲不同於對div的行爲？

我注意到resizable（）對待img與div不同。你可以在http://jsfiddle.net/stevea/yW8NZ/3/看到這個。調整div大小時，resizable（）只是在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>

當調整圖像，可調整大小的（）改變從內聯擋住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>

有人知道爲什麼這種不同的治療方法是必要的嗎？

感謝

來源

2013-07-21 Steve

從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>作爲句柄，因爲您可以AFAIK將<span>放在任何允許兒童的東西內。 OTOH，規範中的某些部分在現實生活中的處理比其他部分更嚴格，所以這可能不會在現實世界中爆發。

來源

2013-07-21 05:48:57

爲什麼resizable（）對圖像的行爲不同於對div的行爲？

回答

相關問題