Question

我正在尝试在表格的行底部添加间距，并且可以正常使用Chrome。但是在IE 8.0中没有显示间距

使用该方法的任何替代方法？

CSS

tr.spaceUnder > td
{
padding-bottom: 7px;
}

HTML

    <table width="105%">

            <tr class="spaceUnder">
                         <td><p>Friday, June 8th<br>
                <a href="https://www.facebook.com/events/357722824277712/" target="_blank" onMouseOver="MM_swapImage('band','','images/awatson.jpg',1)" onMouseOut="MM_swapImgRestore()">Aaron Watson</a></p>
             </td>
             <td valign="bottom"><a href="http://www.ticketfly.com/event/122695/"><img src="http://www.bigtexassaloon.com/images/tix.png" border="0"></a>
                         </td>
                        </tr>

            <tr class="spaceUnder">
              <td>
                <p>Thursday,  June 14th<br>
                            <a href="https://www.facebook.com/events/180258595433140/" target="_blank" onMouseOver="MM_swapImage('band','','images/acoustic.jpg',1)" onMouseOut="MM_swapImgRestore()">Five Man Jam</a><br />
                                &nbsp;&nbsp;Joe Blake<br />&nbsp;&nbsp;Neil Austin Imber<br />&nbsp;&nbsp;Eric Middleton<br />&nbsp;&nbsp;Stephen Chadwick<br />&nbsp;&nbsp;Ryan Lee Evans</p>
                           </td>
            </tr>   
</table>

Answer 1

您是否在HTML中声明了doctype？

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

Answer 2

从声明>中删除tr.spaceUnder > td字符。只有在单元格内部有内部表格时才需要它（即使这样，最好以其他方式限制效果）。

在Quirks Mode中，IE无法识别使用>运算符的CSS3选择器。某些旧浏览器无法在任何模式下识别它们。当存在简单的替代方案时，避免使用它们。

您的页面可能缺少doctype声明或者声明将IE置于Quirks模式（例如，没有URL的HTML 4.01 Transitional doctype）。

该页面也有不同的浏览器兼容性问题，尽管您可能已经处理过未在问题中公开的CSS代码。当p元素作为td元素的唯一内容时，某些浏览器会抑制p元素的正常默认顶部和底部边距，至少在Quirks模式下如此。 “标准模式”下的现代浏览器通常不会这样做，这意味着段落上方和下方都有相当大的垂直间距。

这可以通过在CSS中明确设置p的边距来处理。但是像<td><p>...</p></td>之类的标记通常没有用处，最好省略p标记，避免出现问题。

与表行的IE间距问题

2 个答案: