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 でどのように見えるかです。ブラウザを拡大すると、ボタンは入力ボックスの右側に残り、それに応じて入力ボックスが拡大されます。

IE9 ノーマル

これは、互換モードの IE 9 でどのように見えるかです。ご覧のとおり、入力ボックスは次の行にジャンプします。

IE 9 互換モード

それで、互換モードが設定されているかどうかに関係なく動作するように、これを修正する方法はありますか?

明らかに、ハッキングを最小限に抑えたソリューションを探しています:)

ありがとう！

4

3 に答える 3

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 に答える
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 に答える
-2

You can try using <Table> </Table> instead of Div. They are better containers compared with divs.

于 2012-08-29T16:08:50.087 に答える