0

考虑以下 HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div style="border-style: solid; border-width: thin; width:100%">
    <input type="button" style="width:20px;float:right;" value="a" />
    <div style="padding-right:35px;">
            <input type="text" style="width: 100%;" />
    </div>
</div>
</body>
</html>

这是正确的布局，以及它在正常模式下在 IE 9 中的外观。如果你拉伸浏览器，按钮保持在输入框的右侧，输入框也会相应地拉伸。

IE 9 正常

这就是它在兼容模式下在 IE 9 中的外观。如您所见，输入框跳转到下一行：

IE 9 兼容模式

那么，有没有办法解决这个问题，无论是否设置了兼容模式，它都能正常工作？

显然，我正在寻找一个黑客行为最少的解决方案:)

谢谢！

4

3 回答 3

1

试试这个 HTML：

<div class="search"><input name="btn" type="button" value="a" /><span><input type="text" name="search_input" /></span></div>

使用这个 CSS：

.search > span {
  display: block;
  overflow: hidden;
  padding-right: 10px;
}
.search input[type=text] {
  width: 100%;
}
.search input[type=button] {
  float: right;
}

这是一个 jsfiddle 自己测试一下：

http://jsfiddle.net/KVhUC/

我能够让它与 FF、IE9 一起工作（有/无兼容模式）

于 2012-08-29T16:22:16.107 回答
1

http://jsfiddle.net/Cytkx/4/

<div style="border-style: solid; border-width: thin;">
    <input type="button" style="width:20px;float:right;overflow:hidden;" value="a" />
    <div style="overflow:hidden;padding-right:10px;">
        <input type="text" style="display:block;width:100%;" />
    </div>
</div>

我相信这与您正在寻找的内容很接近。请注意，这可能不向后兼容。

于 2012-08-29T16:39:57.213 回答
-2

您可以尝试使用<Table> </Table>而不是Div. 与 div 相比，它们是更好的容器。

于 2012-08-29T16:08:50.087 回答