[英]Border-bottom doers not come as underline in Chrome and Firefox; works in IE
I have HTML code as given in http://jsfiddle.net/Lijo/FRBqJ/ . 我有http://jsfiddle.net/Lijo/FRBqJ/中给出的HTML代码。 In internet explorer it works fine - the header text comes with an underline. 在Internet Explorer中,它可以正常工作-标题文本带有下划线。 But in Firefox and Chrome the line is not coming as underline. 但是在Firefox和Chrome浏览器中,这条线不是下划线。
What is the reason for this incorrect behavior? 这种错误行为的原因是什么?
How can we correct it (using CSS) ? 我们如何纠正它(使用CSS)?
Firefox 火狐浏览器
IE IE浏览器
HTML 的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 的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;
}
REFERENCE: 参考:
Since you're using float
, you should also add overflow: auto;
由于您使用的是float
,因此还应该添加overflow: auto;
to the parent element so that it accounts for the floated element: 到父元素,以便它考虑浮动元素:
.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 */
}
Demo: http://jsfiddle.net/FRBqJ/1/ 演示: http : //jsfiddle.net/FRBqJ/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.