我遇到一个包含三行单元格的表的问题。其中两个（左和右）具有固定的宽度/高度并且应该显示图像（或者当没有图像时缩小到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中工作。
答案 0 :(得分：10)
在严格模式下，默认情况下图片是内联的，因为您使用的是严格的，因此您需要通过将display:block应用于图片来手动修复此图片。
“在早期，严格模式的实验总是提高了 评论说，图像突然有一个奇怪的底部边缘，这是不可能的 除去。原因是严格模式是内联 元素，这意味着应该保留一些空间 下降字符，如g，j或q。当然图像没有 下降字符，所以空间从未使用过，但它仍然必须 保留。
解决方案是显式声明图像块级元素： img {display：block}。“
答案 1 :(得分：0)
我遇到了类似的问题。通常，您必须使用以下标记禁止所有css元素上的边距和填充（最好在样式表的开头）： * { 利润率：0; 填充：0; }
领先的'*'很重要。这可以节省几个小时的挫败感。 之后，如果你有一个文本单元格，它可能看起来好像在顶部仍然有半个填充，但那是因为大多数文本字符都比em短。