html - 在 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. FF/IE 和 Chrome 之间的 CSS 文本下划线渲染差异

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/