Question

我有一个包含在内联元素中的文本输入，它添加了一些填充和边框。但是当我增加font-size时，输入增长超出了包含元素。

display:flex-inline似乎解决了这个问题，但我认为IE支持不是很好吗？

如何让容器的高度自动调整？优选IE <9支持。

Answer 1

更简洁的方法是稍微改变你的DOM，所以支持将来自所有浏览器，没有任何黑客攻击。

看到 Working Fiddle

HTML：（span而不是div）

<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-block代替field而不是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%
}

它跨浏览器工作

文本输入中的大字体大小突破容器

2 个答案: