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/