在Safari中为每个DIV表元素获取不需要的1px额外高度

我有一个问题,一个表中包含三个单元格.其中两个(左和右)具有固定的宽度/高度并且应该显示图像(或者当没有图像时缩小到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: hidden;

text-overflow: ellipsis;

white-space: nowrap;

padding-left: 2px;

vertical-align: middle;

}

.text b {

font-weight: 700;

font-size: 11pt;

}

.date {

display: table-cell;

width: 50px;

vertical-align: middle;

text-align: right;

font-size: 8pt;

padding-top: 3px;

padding-right: 5px;

}

.date b {

font-weight: 700;

line-height: 11pt;

}


.starredunread {

display: table-cell;

top: 0px;

left: 0px;

width: 20px;

height: 44px;

vertical-align: middle;

}

.icon {

display: table-cell;

top: 0px;

right: 0px;

width: 44px;

height: 44px;

}


.content {

display: table;

width: 320px;

background-color: #fff;

color: #000;

font-size: 12pt;

text-align: left;

padding: 15px;

}

.sectionheader {

height: 20px;

}

.sectionheaderrow {

}

.sectionunread {

height: 20px;

}

.sectiontext {

font-weight: 700;

font-size: 9pt;

padding-top: 1px;

}

.smallicon {

width: 20px;

height: 20px;

}

这是HTML代码:

    


        

            
        


        

                Testheader

                Text for testing - this should overflow with an ellipsis if the text exceeds the size of the container...
        


        

                11.11.09

                18:54
        


        

            
        


    


 


    More text for testing purposes.

Not really relevant.

 So don't waste your time reading this. :o)




    


        

            
        


        

            Another Header
        


        

            
        


    




 

...没有图像看起来不太好看,但无论如何它都证明了我的问题.

知道我做错了什么吗？非常感谢您的投入!代码只需要在Safari/Webkit中工作.

在严格模式下,默认情况下图像是内联的,因为您使用严格,您需要通过应用于display:block图像手动修复此图像.

"在早期,严格模式的实验总是提出这样的评论,即图像突然得到了一个无法消除的奇怪的底部边缘.原因是在严格模式下是一个内联元素,这意味着应该保留一些空间用于可能的下降字符,如g,j或q.当然,图像没有下降字符,因此空间从未使用过,但仍然需要保留.

解决方案是显式声明图像块级元素:img {display:block}."

http://www.quirksmode.org/css/quirksmode.html