我有一段在IE和Firefox中运行良好的代码。它在显示器内有3个表格单元格:table;包装。中间单元具有固定宽度和背景图像,左右单元没有宽度和纯色。在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>
答案 0 :(得分:3)
将table-layout: fixed;
添加到#navbar
。
这解决了问题,因为:
http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout
在固定表格布局算法中,每列的宽度为 确定如下:
- “width”属性的值为“auto”的列元素设置该列的宽度。
- 否则,第一行中“width”属性的值不是“auto”的单元格将确定该列的宽度。如果 单元格跨越多个列,宽度除以 列。
- 任何剩余的列均等地划分剩余的水平表空间(减去边框或单元格间距)。
醇>
答案 1 :(得分:1)
Internet Explorer也遇到空元素问题。
试试这个:
<div id="navbar">
<div id="left"> </div>
<div id="middle"> </div>
<div id="right"> </div>
</div>