Css 文本输入中的大字体脱离容器

我将文本输入包装在一个内联元素中，该元素添加了一些填充和边框。但是，当我增加字体大小时，输入将超出包含的元素

display:flex-inline

似乎可以解决这个问题，但我认为它没有很好的IE支持

---

如何使容器的高度自动调整？最好使用IE一种更干净的方法是稍微修改一下DOM，这样所有浏览器都会提供支持，而不会受到任何攻击

看到了吗

HTML:（span而不是div）

但是，如果无法更改DOM，请对

字段使用
内联块
，而不是
内联块

在这种情况下，您需要应用一些修复程序使其在IE6、IE7中工作

看到了吗

HTML:（与您的相同）

您可以通过设置输入的最大宽度：100%来解决此问题。我的意思是：


输入{
最大宽度：100%
}
in display是什么意思？这是一个css黑客还是一个有效的css？@imsiso它只针对8.+1以下的IE-这是一个有效的css吗？和/或是css黑客？这是无效的css语法。这是一个IE黑客。第二个声明将由IE7和更早版本应用（从而覆盖第一个声明），而其他浏览器将忽略它并继续应用第一个声明。因此，如果我使用的CSS将不是有效的CSS，我应该做什么来替代有效的CSS？
<span class="field">
    <input type="text" />
</span>

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

input {
    font-size:1.3em;
}

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

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

input {
    font-size:1.3em;
}