Question

我遇到一个包含三行单元格的表的问题。其中两个（左和右）具有固定的宽度/高度并且应该显示图像（或者当没有图像时缩小到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代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<title>testHTML</title>

<link rel="stylesheet" href="test.css" type="text/css" media="screen" />

</head>

<body>

<div class="header">

    <div class="headerrow">

        <div class="starredunread">
            <img src="images/testimg_small.png">
        </div><!-- end starredunread -->

        <div class="text">
                <b>Testheader</b><br>
                Text for testing - this should overflow with an ellipsis if the text exceeds the size of the container...
        </div><!-- end text -->

        <div class="date">
                <b>11.11.09</b><br>
                18:54
        </div><!-- end date -->

        <div class="icon">
            <img src="images/testimg_44x44.png">
        </div><!-- end icon -->

    </div><!-- end headerrow -->

</div> <!-- end header -->

<div class="content">
    More text for testing purposes.<br><br>Not really relevant.<br><br> So don't waste your time reading this. :o)
</div><!-- end content -->

<div class="header sectionheader">

    <div class="headerrow sectionheaderrow">

        <div class="starredunread sectionunread">
            <img src="images/testheader.png">
        </div><!-- end sectionunread -->

        <div class="text sectiontext">
            Another Header
        </div><!-- end sectiontext" -->

        <div class="icon smallicon">
            <img src="images/testimg_20x20.png">
        </div><!-- end smallicon -->

    </div><!-- end sectionheaderrow -->

</div><!-- end sectionheader -->

</body> 

</html>

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

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

Answer 1

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

“在早期，严格模式的实验总是提高了   评论说，图像突然有一个奇怪的底部边缘，这是不可能的   除去。原因是严格模式是内联   元素，这意味着应该保留一些空间   下降字符，如g，j或q。当然图像没有   下降字符，所以空间从未使用过，但它仍然必须   保留。

解决方案是显式声明图像块级元素：   img {display：block}。“

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

Answer 2

我遇到了类似的问题。通常，您必须使用以下标记禁止所有css元素上的边距和填充（最好在样式表的开头）： * { 利润率：0; 填充：0; }

领先的'*'很重要。这可以节省几个小时的挫败感。之后，如果你有一个文本单元格，它可能看起来好像在顶部仍然有半个填充，但那是因为大多数文本字符都比em短。

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

2 个答案: