1

IE と Firefox で正常に動作するコードがあります。display:table; 内に 3 つのテーブル セルがあります。ラッパー。中央のセルは幅が固定で背景画像があり、左右のセルは幅がなく単色です。Firefox では、つまり、表のように左右の列が拡大して残りのスペースを埋めますが、クロムでは、これら 2 つのセルの幅がまったく表示されません。

中央のセルの左右の残りのスペースを埋めるために、左右の列を拡張する必要があります。

CSS

#navbar{
    width:100%;
    height:43px;
    border-bottom:2px solid #ffffff;    
    display:table;
}

#navbar #left{
    display:table-cell;
    background:#fcb316;
}

#navbar #middle{
    display:table-cell;
    width:1024px;
    height:43px;
    background:url(images/nav-bg.jpg) no-repeat;
}

#navbar #right{
    display:table-cell;
    background:#8cc63f;
}

HTML

<div id="navbar"> 
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>
4

2 に答える 2

3

に追加table-layout: fixed;し#navbarます。

これにより、次の理由で問題が修正されます。

http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout

固定テーブル レイアウト アルゴリズムでは、各列の幅は次のように決定されます。

  1. 'width' プロパティの値が 'auto' 以外の列要素は、その列の幅を設定します。
  2. それ以外の場合、'width' プロパティの値が 'auto' 以外の最初の行のセルによって、その列の幅が決まります。セルが複数の列にまたがる場合、幅は列に分割されます。
  3. 残りの列は、残りの水平表スペースを均等に分割します (境界線またはセル間隔を差し引いたもの)。
于 2013-09-02T11:12:18.900 に答える
1

Internet Explorer にも空の要素に関する問題がありました。

これを試して：

<div id="navbar"> 
    <div id="left">&nbsp;</div>
    <div id="middle">&nbsp;</div>
    <div id="right">&nbsp;</div>
</div>
于 2013-09-02T11:05:22.080 に答える