为什么<input>元素不支持min-width？

Question

http://jsbin.com/nuzazefuwi/1/edit?html,css,output

在上面的链接中,文本框应该只有10px而不是宽度为152px.

这是代码:

.input {
  width: 100%;
  box-sizing: border-box;
}

.cont {
  padding: 2px;
}

.main {
  position: absolute;
  border: 1px solid black;
  min-width: 15px;
}

<div class='main'>
  <div class='cont'>
    <input type="text" class='input' />
  </div>
</div>
<br/>
<br/>
<br/> the textbox should have 10px

看起来输入在.main min-width大于156px 后才开始获得正确的宽度.

Answer 1

有size="20"设置<input>类型text,search,tel,url,email,和password...缺省,这大约是的100px宽度,尽管它可以在不同的浏览器和操作系统而异.

在父级上,你已min-width:15px;设置,不会产生任何效果,因为该值远小于100px.如果您将其更改为width:15px;或者max-width:15px;您将看到差异.

或者你可以给出size一个非常小的值,例如size="1".