我刚刚在Chromium上看到了
resize:vertical
resize:both
resize:horizontal
我已经阅读了w3c规范,我想问题是因为这样的:
用户代理 可以 将调整大小的范围限制在适当的范围内,例如介于元素的 原始格式化大小 之间,并且必须足够大以包含所有元素的内容。
即使Chrome应用了以上段落,有没有办法做到这一点?
注意 :我使用Chromium 30.0.1592.0(216775)
Javascript解决方案:
function resizableStart(e){ this.originalW = this.clientWidth; this.originalH = this.clientHeight; this.onmousemove = resizableCheck; this.onmouseup = this.onmouseout = resizableEnd; } function resizableCheck(e){ if(this.clientWidth !== this.originalW || this.clientHeight !== this.originalH) { this.originalX = e.clientX; this.originalY = e.clientY; this.onmousemove = resizableMove; } } function resizableMove(e){ var newW = this.originalW + e.clientX - this.originalX, newH = this.originalH + e.clientY - this.originalY; if(newW < this.originalW){ this.style.width = newW + 'px'; } if(newH < this.originalH){ this.style.height = newH + 'px'; } } function resizableEnd(){ this.onmousemove = this.onmouseout = this.onmouseup = null; } var els = document.getElementsByClassName('resizable'); for(var i=0, len=els.length; i<len; ++i){ els[i].onmouseover = resizableStart; }
上面的解决方案使用mouseover和mouseout触发resizableStart和resizableEnd。问题是,如果要调整大小的元素具有子元素,则将鼠标放在子元素上时,该元素会收到一个mouseout事件,并且紧随其后,它会收到一个mouserover从子元素冒泡的事件。