1

我有一段代码在 IE 和 Firefox 中运行良好。它在一个显示器中有 3 个表格单元格：表格；包装。中间单元格具有固定宽度，带有背景图像，左右单元格没有宽度和纯色。在 Firefox 中，即左列和右列扩展以填充剩余空间，就像表格一样……但在 chrome 中，这两个单元格根本没有显示宽度。

我需要它来扩展左右列以填充中心单元格左右两侧的剩余空间。

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 回答