底邊框的問題
為什么我在li.select中設置border-bottom為none或0不能完全去除底邊框,而是還存在一條細線呢(如下圖)?用border-bottom-color:#fff就沒問題.
*{
margin:0;
padding:0;
list-style:none;
font-size:12px;
text-decoration:none;
}
#notice{
width:298px;
height:98px;
margin:10px;
border:1px?solid?#f0f0f0;
}
.notice-title{
position:relative;
height:27px;
overflow:hidden;
background-color:#f7f7f7;
}
.notice-title?ul{
position:absolute;
left:-1px;
width:300px;
}
.notice-title?li{
float:left;
width:58px;
height:26px;??/*26+1=27*/
line-height:26px;
font-size:16px;
padding:0?1px;
text-align:center;
border-bottom:1px?solid?#f0f0f0;
}
.notice-title?a:link,.notice-title?a:visited{
color:black;
}
.notice-title?a:hover{
color:orange;
}
.notice-title?li.select{
border-bottom:none;
border-left:1px?solid?#f0f0f0;
border-right:1px?solid?#f0f0f0;
padding:0;
background-color:#fff;
}
2017-07-17
.notice-title?li.select{ ????border-bottom:none; }這里的下邊框不能直接設置none，因為此時li標簽的高度是26px，而父元素祖先原色.notice-title的高度是27px，設置為none之后，此時你看到的其實不是下邊框，而是祖先元素的背景顏色，所以這時候只需要把下邊框的背景顏色設置為#FFF即可，而不是清楚下邊框。
.notice-title?li.select{ ????border-bottom-color:#FFF; }2017-07-17
.notice-title li.select{
? ?border-bottom:none;
}
這里的下邊框不能直接設置none，因為此時li標簽的高度是26px，而祖先元素.notice-title的高度是27px，設置為none之后，此時你看到的其實不是下邊框，而是祖先元素的背景顏色，所以這時候只需要把下邊框的背景顏色設置為#FFF即可，而不是清楚下邊框。
.notice-title li.select{
? ?border-bottom-color:#FFF;
}