我有一个问题,一个表中包含三个单元格.其中两个(左和右)具有固定的宽度/高度并且应该显示图像(或者当没有图像时缩小到0).中间单元格使用表格的固定总数来获取剩余空间.
问题是:现在我最终得到3px的额外空间,"图像容器"似乎扩展了(在单元格下方).你可以通过检查'starredunread'元素来看到它,例如,它的高度从20px增长到23px.我不知道发生了什么,因为默认情况下边距/填充已经关闭并且边框:0和边框折叠:折叠没有帮助.
这是CSS文件:
/*------------------------------------------
Reset (from the Yahoo UI Library)
------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table{border-collapse:collapse;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0}
a{outline: none;}
/*------------------------------------------
Interface
------------------------------------------*/
body {
top: 0px;
left: 0px;
width: 320px;
height: 480px;
background-color: #f00;
color: #000;
font-family: helvetica, arial, sans-serif;
font-size: 12px;
}
.header {
display: table;
top: 0px;
left: 0px;
width: 320px;
height: 44px;
background-color: #738ba3;
color: #fff;
table-layout: fixed;
border: 0;
border-spacing: 0;
}
.headerrow {
display: table-row;
}
.text {
display: table-cell;
overflow: …Run Code Online (Sandbox Code Playgroud)