HTML缩小td以适合图像大小

我正在布局一个带有表格的网站，并且徽标位于表格的首行。该徽标是带有绿色背景的大部分透明图像，并且位于带有红色背景的表格中。但是，表格单元不会缩小以适合垂直图像，因此当我不需要时，它会在图像下方显示一些背景红色。我曾尝试将margin和padding全部设置为0，将cell-spacing和cell-padding设置为0，并删除边界，但它们都没有工作。HTML缩小td以适合图像大小

我的浏览器的页面检查器工具显示td元素是负责扩展单元的高度，而不是tr或table

我缺少什么？我觉得这很简单。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="styles2.css" /> 
</head> 
<body> 
    <div id="wrapper"> 
    <table id="layoutTable" > 
     <tr> 
     <td class="layoutTabletd"> 
      <img id="logoImage" src="res/logobar2.png"/> 
     </td> 
     </tr> 
    </table> 
    </div> 
</body> 
</html>

CSS：

#wrapper 
{ 
    width:    1000px; 
    margin-left:  auto; 
    margin-right:  auto; 
} 
#layoutTable 
{ 
    background-color: #FF0000; 
    margin:    0px; 
    padding:   0px; 
    border-collapse: collapse; 
} 
#layoutTable tr td.layoutTabletd 
{ 
    border:    1px solid black; 
    padding:   0px; 
    margin:    0px; 
} 
#logoImage 
{ 
    background-color: #00FF00; 
    margin-left:  auto; 
    margin-right:  auto; 
    margin-top:   0px; 
    margin-bottom:  0px; 
    padding:   0px; 
}

结果：

来源

2015-09-25 Aderis

这是以严格模式，几乎严格还是怪癖模式呈现的？ –

@IsmaelMiguel不知道。我如何检查？我正在使用Safari 8.0.8 – Aderis

好问题...尝试在图像上设置“display：block”。如果它什么都不做，那么它可能处于几乎严格的模式。 –

解决：http://jsfiddle.net/r0801v5v/

#layoutTable 
{ 
    line-height:0; 
    background-color: #FF0000; 
    margin:    0px; 
    padding:   0px; 
    border-collapse: collapse; 
}

注意添加的行高：0; - 我不确定为什么会发生这种情况，但我之前就看到过。希望我帮助。

来源

2015-09-25 17:52:53

HTML缩小td以适合图像大小

回答

相关问题