文本輸入中的大字號突破了容器

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% 
 
}

它可以跨瀏覽器