带照片的 HTML 表格单元格宽度 - 跨浏览器答案

【问题标题】：HTML Table Cell Width with Photo - Cross Browser带照片的 HTML 表格单元格宽度 - 跨浏览器
【发布时间】：2013-07-25 05:17:12
【问题描述】：

我有以下 HTML 代码：我要做的是显示图像并在图像下方显示表格单元格中的文本。示例：

<table bgcolor="yellow" cellspacing="0" cellpadding="0">
        <tr>
            <td  width="100%">
                        <img width="100%" src="http://eofdreams.com/data_images/dreams/cat/cat-01.jpg" border="0"  style="vertical-align: top;"/> <br/>
                        <div  style="background-color: #023F7D">
                            <p>test</p>
                        </div>

                    </td>
        </tr>
    </table>

上面的代码在图像的右侧留下了一个黄色的垂直条纹。图片未覆盖整个 TD。

如果我将 width="100%" 放在 img 标签中，问题是照片下方出现黄色条纹。这只发生在 IE 中（在 Safari 中可以正常工作）。我想在照片下显示 div 没有任何空间。

我做错了什么？

【问题讨论】：

将 display:block 添加到您的 img 样式并从您的 p 标签中删除上边距 - jsfiddle.net/cafT5
也不是必需的。谢谢！

标签： html image html-table width

【解决方案1】：

问题是<p> 标签默认有一些边距。所以我们必须通过将 margin: 0 添加到 <p> 标记来覆盖它，以便它为此清除边距。

【讨论】：