html - Border-bottom 在 Chrome 和 Firefox 中不是下划线；在 IE 中工作

Question

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

1. 这种不正确行为的原因是什么？

2. 我们如何纠正它(使用 CSS)？

火狐

浏览器

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; 添加到父元素，以便它说明 float 元素:

.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/