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以適合圖像大小

回答

相關問題