0

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

display:flex-inline似乎可以解决它，但我认为它没有很好的 IE 支持？

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

如何使容器的高度自动调整？最好支持 IE<9。

4

2 回答 2

1

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

看到那个Working Fiddle

HTML：（跨度而不是 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-blockforfield代替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;
}
于 2013-09-29T15:24:27.333 回答
0

您可以将 max-width:100% 设置为输入来解决此问题。我是说：

input {
  max-width:100%
}

它可以跨浏览器工作

于 2015-06-11T18:54:02.363 回答