CSS3 resize属性只允许增加DIV大小 [英] CSS3 resize property allows only increasing DIV size

问题描述

CSS3中有一个 resize 属性，可以应用于 div （例如http://www.impressivewebs.com/css3-resize/ ）。我正在构建一个丰富的UI，并发现这个功能非常有用在我的情况。我尝试依靠CSS3而不是JavaScript，所以我喜欢这个原生解决方案。

这问题是 - 它不允许

它会在Safari 5.0.5，Chrome 12.0.742.91中重现，而Firefox 4.0.1会调整两个框的大小方法。

问题：对所需行为是否有任何解决方法？

： http://jsfiddle.net/wsCQm/

  .resizable {
 height：100px; 
 width：100px; 
 overflow：scroll; 
 resize：both; 
} 
 
< div class =resizable> 
有些东西
< / div> 
  

解决方案

这是由浏览器设置

用户代理可以将调整大小范围限制为适当的，例如在元素的原始格式化大小之间，并且大到足以包含所有元素的内容。

http://www.w3.org/TR/css3-ui/#resize

There is a resize property in CSS3 which can be applied to a div (e.g. http://www.impressivewebs.com/css3-resize/). I am building a rich UI, and found this feature very useful in my case. I try to rely on CSS3 more than JavaScript, so I like this "native" solution.

This problem is - it doesn't allow a user to make the box less than its original size.

It reproduces in Safari 5.0.5, Chrome 12.0.742.91, while Firefox 4.0.1 resizes a box in both ways.

Question: is there any workaround for desired behavior? I still want to stick with resize property.

Example: http://jsfiddle.net/wsCQm/

.resizable {
     height: 100px;
     width: 100px;    
     overflow: scroll;
     resize: both;   
}

<div class="resizable"> 
    Some stuff
</div>

解决方案

This is set by the browser

The user agent may restrict the resizing range to something suitable, such as between the original formatted size of the element, and large enough to encompass all the element's contents.

http://www.w3.org/TR/css3-ui/#resize

这篇关于CSS3 resize属性只允许增加DIV大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！