简体   繁体   English

表行的IE间距问题

[英]IE spacing issue with table rows

I'm trying to add spacing to the bottom of rows in a table, and it works fine with Chrome. 我正在尝试在表格的行底部增加间距,并且它在Chrome中可以正常使用。 But the spacing is not showing in IE 8.0 但是在IE 8.0中没有显示间距

Any alternatives to the method used? 是否有替代方法?

CSS 的CSS

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

HTML 的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>

您是否在html中声明了doctype?

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

Remove the > character from the declaration tr.spaceUnder > td . 从声明tr.spaceUnder > td删除>字符。 It would be needed only if there were inner tables inside the cell (and even then, it would be better to restrict the effect in some other way). 仅当单元内部有内部表时才需要(即使那样,最好以其他方式限制效果)。

In Quirks Mode , IE does not recognize such CSS3 selectors that use the > operator. Quirks模式下 ,IE无法识别使用>运算符的CSS3选择器。 Some old browsers do not recognize them in any mode. 一些旧的浏览器在任何模式下都无法识别它们。 Avoid using them, when a simple alternative exists. 存在简单替代方法时,请避免使用它们。

Your page probably lacks a doctype declaration or has a declaration that puts IE into Quirks Mode (eg, HTML 4.01 Transitional doctype without a URL). 您的页面可能缺少doctype声明,或者具有使IE进入Quirks模式的声明(例如,没有URL的HTML 4.01 Transitional doctype)。

The page has a different browser compatibility issue as well, though you may have dealt with in CSS code that was not disclosed in the question. 该页面也存在另一个浏览器兼容性问题,尽管您可能已经处理了问题中未披露的CSS代码。 When you have a p element as the sole content of a td element, then some browsers suppress the normal default top and bottom margins for the p element, at least in Quirks Mode. 当您将p元素作为td元素的唯一内容时,则某些浏览器至少在Quirks模式下会抑制p元素的常规默认顶部和底部边距。 Modern browsers in “standards mode” usually don't do that, which means that there is considerable vertical spacing above and below the paragraph. 处于“标准模式”的现代浏览器通常不会这样做,这意味着该段落的上方和下方都有相当大的垂直间距。

This can be handled by setting the margins for p explicitly in CSS. 这可以通过在CSS中显式设置p的边距来处理。 But markup like <td><p>...</p></td> normally serves no useful purpose, and the p markup is best omitted, avoiding the issue. 但是像<td><p>...</p></td>的标记通常没有用处,最好省略p标记,以避免出现此问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM