文本输入中的大字号突破了容器

Question

我有一个文本输入包裹在内嵌元素中，它添加了一些填充和边框。但是，当我增加字体大小输入增长超出包含元素。

display:flex-inline似乎修复它，但我不认为有很好的支持IE？

http://jsfiddle.net/3hyjd/1/

我怎样才能使容器的高度自动调整？最好用IE < 9支持。

Answer 1

一个更简洁的方法将改变你的DOM一点点，这样的支持将是从所有的浏览器，无需任何破解。

看到Working Fiddle

HTML：（跨度，而不是格）

<span class="field"> 
    <input type="text" /> 
</span> 

CSS：

.field { 
    border: 1px solid red; 
    padding: 5px; 
    display: inline-block; 
} 

input { 
    font-size:1.3em; 
} 

但是，如果你不能改变你的DOM，使用而不是inline。

在这种情况下，你需要应用一些修复了它在IE6，IE7工作。

请参阅Working Fiddle

HTML：（和你的一样）

<div class="field"> 
    <input type="text" /> 
</div> 

CSS：

.field { 
    border: 1px solid red; 
    padding: 5px; 
    display: inline-block; 
    /*fix for IE6,IE7*/ 
    *display: inline; 
    zoom: 1; 
} 

input { 
    font-size:1.3em; 
} 

Answer 2

可以解决这一问题设定一个最大宽度：100％的输入。我的意思是：

input { 
 
    max-width:100% 
 
}

它可以跨浏览器