将背景图像与 DOCTYPE 一起使用答案

【问题标题】：Using background-image with DOCTYPE将背景图像与 DOCTYPE 一起使用
【发布时间】：2014-06-30 14:07:51
【问题描述】：

我有一个.asp 页面，当我在ASP 页面顶部放置DOCTYPE 时，我无法显示图像。如果我删除顶部的 DOCTYPE，则会显示图像。谁能帮我弄清楚如何在不删除顶部的 DOCTYPE 的情况下显示图像？请参阅下面的代码：

文档类型：

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

HTML：

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td style="width:200px"><span id="ImgHeader"></span></td>
    </tr>
</table>

CSS：

#ImgHeader
{
    background-image:url(img/header.jpg);
    width:200px;
    height:35px;
}

【问题讨论】：

span 是一个内联元素。您不能设置内联元素的宽度和高度。将其更改为display: inline-block;
使用现代 DOCTYPE 的时间：<!DOCTYPE html>。此外，<span> 是一个内联元素。考虑在<td>设置背景或者将<span>改为<div>

【解决方案1】：

由于<span> 是一个内联元素，你不能对它应用height。

您应该将<span> 更改为<div>，这是一个块元素。

<td style="width:200px"><div id="ImgHeader"></div></td>

或将 CSS 选择器应用于<td>（如果适用）：

<td id="ImgHeader">&nbsp;</td>

最后，是时候改用现代 HTML5 DOCTYPE了：

<!DOCTYPE html>

重要提示：永远不要删除 DOCTYPE。

附言如果您担心 HTML5 DOCTYPE 的旧浏览器支持，请阅读this。简而言之，旧浏览器也支持这个 DOCTYPE（除了 NS6，我相信没有人使用它）

【讨论】：