在Chrome和Firefox中，边框底部不是下划线;适用于IE

Question

我有http://jsfiddle.net/Lijo/FRBqJ/中给出的HTML代码。在Internet Explorer中它工作正常 - 标题文本带有下划线。但在Firefox和Chrome中，这条线不是强调的。

1. 这种错误行为的原因是什么？

2. 我们如何纠正它（使用CSS）？

火狐



IE



HTML

    <div id="searchContainer" class="searchContainer">
                        <div id="searchHeader" class="searchHeader">
                            <span id="detailContentPlaceholder_lblSearchHeading" class="searchContentHeadingText">
                                Business Testing Act</span>
                            <img alt="Expand" src="Images/PlusIcon.GIF" class="expandSearchIcon" />
                            <img alt="Collapse" src="Images/MinusIcon.GIF" class="collapseSearchIcon" />
                        </div>
   </div>

CSS

.searchHeader
{
width:100%; 
border-bottom:2px solid #fcda55;
padding:0 0 2px 0;
margin:0 0 0 0px;
font:bold 13pt Arial;
line-height:10pt;
color:#00A6B5;
}

参考：

1. CSS text-underline rendering difference between FF/IE and Chrome

Answer 1

由于您使用的是float，因此您还应该将overflow: auto;添加到父元素，以便它考虑浮动元素：

.searchHeader
{
    width:100%; 
    border-bottom:2px solid #fcda55;
    padding:0 0 2px 0;
    margin:0 0 0 0px;
    font:bold 13pt Arial;
    line-height:10pt;
    color:#00A6B5;
    overflow: auto;  /* Right here */
}

演示：http://jsfiddle.net/FRBqJ/1/