logo标签列表

HTML如何缩小表格单元格以适应图像大小

htmlcss
3
我正在制作一个网站，并使用表格布局，其中logo位于表格的顶行。Logo是一张透明度较高、绿色背景的图片，而它所在的表格有红色背景。然而，表格单元格的垂直高度没有根据图片自动调整，因此当我不想要它显示背景红色时，会在图片下方显示部分红色背景。我尝试将margin和padding都设置为0，将cell-spacing和cell-padding设置为0，并移除边框，但这些尝试都没有奏效。

我的浏览器页面检查工具显示，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;
}

结果: result

这是以严格模式、准严格模式还是怪异模式呈现的？ - Ismael Miguel
@IsmaelMiguel 我不知道。我该如何检查？我正在使用Safari 8.0.8。 - Adam Evans
很好的问题...尝试在图像上设置display:block。 如果没有任何效果，则可能处于几乎严格模式。 - Ismael Miguel
1个回答
4
解决方案： http://jsfiddle.net/r0801v5v/ 
#layoutTable
{
  line-height:0;
  background-color:   #FF0000;
  margin:             0px;
  padding:            0px;
  border-collapse:    collapse;
}

注意添加了line-height:0; - 我不确定为什么会发生这种情况，但我以前见过类似的情况。希望我的回答有所帮助。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接