1

CSS に問題があります。
私は非常に簡単なセットアップをしています。それぞれに 3 つのボタンを含む 2 つの div。私はそれらがそれぞれ1行を占めると予想するので、それぞれに3つのボタンがある2行です。

これは Chrome も同じですが、IE9 ではすべてを 1 つの行に配置し、ボタンの 1 つの位置にねじ込みます。

私は次のHTMLを持っています:

<div id="HelpCodesControl">
    <div class="ButtonRow">
        <button id="HelpCode_None" title="None" />
        <button id="HelpCode_Operator" title="Operator" />
        <button id="HelpCode_Maintenance" title="Maintenance" />
    </div>

    <div class="ButtonRow">
        <button id="HelpCode_Quality" title="Quality" />
        <button id="HelpCode_Warehouse" title="Warehouse" />
        <button id="HelpCode_Setup" title="Setup" />
    </div>
</div>

そして私のCSS：

#HelpCodesControl {
    height: 100%;
    width: 100%;
    background-color: cadetblue;
}
.ButtonRow {
    background-color: cornflowerblue;
    display: inline-block;
    width: 100%;
}
.ButtonRow button {
    height: 48px;
    width: 100px;
}

ここに例を示します。Chrome では考えられるように動作しますが、IE9 では動作しません: http://jsfiddle.net/M96r3/

それで、私は何を間違っていますか？Chrome のように IE9 でボタンが 2 行に表示されないのはなぜですか?

4

3 に答える 3

1

HTML に構造上のエラーがあります。ボタンが適切に閉じられていません。

<button id="HelpCode_None" title="None" />

する必要があります

<button id="HelpCode_None" title="None"></button>

現在のところ、ブラウザーは開始タグを 6 つしか認識せず、終了タグを認識せず、原則としてボタンを相互に入れ子にします (ただし、そのようにボタンを表示するブラウザーはありません。ただし、一部のブラウザーではボタンが 2 つしか表示されません。ブラウザーが異なれば、エラーに対する応答も異なります)。 .

XHTML では、これを回避することができます - 結局整形式の XML です - しかし、HTML モードで XHTML を表示しようとするブラウザーで問題が発生するため、強くお勧めしません。void 要素にのみ自己終了タグを使用してください。

これは、HTML を修正した最新のフィドルです。これは、IE と他のブラウザーの表示に大きな違いがないことを示しています。

于 2013-08-22T11:58:20.203 に答える
0

ヘッダーを確認しましたか？Chrome やその他の Web ブラウザでは動作するが IE では動作しない場合は、ヘッダーを次のように置き換えてみてください。

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
于 2013-08-22T07:48:30.007 に答える
0

display: table-cell;代わりに of を使用することもできますdisplay: inline-block;が、私の提案は、要件にdisplay: inline-block;for buttonnot toを使用する.ButtonRowことです。

于 2013-08-22T07:47:57.177 に答える