CSS3 resize属性只允许增加DIV大小

问题描述

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

这问题是 - 它不允许

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

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

：

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

解决方案

这是由浏览器设置

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

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

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