10-1編程挑戰問題：css樣式上邊框問題
附上代碼：
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實踐題 - 選項卡</title>
??? <style type="text/css">
???? /* CSS樣式制作 */ ?
? ??? ?*{margin:0; list-style: none;padding: 0; text-decoration: none; color:#000; font-size: 14px; border:0;}?? ?
??? #u1 {
?? ??? ?margin-top: 10px;
?? ??? ?position: relative;
??? }
? ??? ?li>a{
? ??? ??? ?display: block;
? ??? ??? ?width:70px;
? ??? ??? ?height:13px;
? ??? ??? ?float: left;
? ??? ??? ?line-height: 13px;
? ??? ??? ?text-align: center;
? ??? ??? ?margin-left: 10px;
? ??? ??? ?border-top:1px solid #ccc;
? ??? ??? ?border-left:1px solid #ccc;
? ??? ??? ?border-right:1px solid #ccc;
? ??? ??? ?padding: 10px 10px;
? ??? ??? ?background-color: #fff;
? ??? ?}
? ??? ?#a1{
? ??? ??? ?line-height: 15px;
? ??? ??? ?height: 15px;
? ??? ??? ?border-top: 3px solid #0fe;
? ??? ?}
??? .bl{
?? ??? ?position: absolute;
?? ??? ?left:0;
?? ??? ?top:34px;
?? ??? ?margin-left: 5px;
?? ??? ?width: 350px;
?? ??? ?line-height: 20px;
?? ??? ?border-top: 3px solid #0fe;
?? ??? ?border-left: 1px solid #ccc;
?? ??? ?border-right: 1px solid #ccc;
?? ??? ?border-bottom: 1px solid #ccc;
?? ??? ?overflow: hidden;
?? ??? ?z-index: -9999;
??? }
??? #u1 div a{
?? ??? ?display: inline-block;
?? ??? ?margin-left: 10px;
??? }
??? #block1{height: 84px;}
??? #block2{height: 0;}
??? #block3{height: 0;}
??? </style>
??? <script type="text/javascript">
??????? ?
??? // JS實現選項卡切換
??? function clk(obj){
?? ??? ?var pnode=obj.parentNode.parentNode;
?? ??? ?var list=pnode.getElementsByTagName("li");
?? ??? ?for(var i=0; i<list.length; i++){
?? ??? ??? ?var aA = list[i].getElementsByTagName("a")[0];
?? ??? ??? ?if(aA === obj){
?? ??? ??? ??? ?aA.style.borderTop="3px solid #0fe";
?? ??? ??? ??? ?aA.style.height="15px";
?? ??? ??? ??? ?aA.style.lineHeight="15px";
?? ??? ??? ??? ?var sib=aA.nextSibling;
?? ??? ??? ??? ?while(sib.nodeType!=1){
?? ??? ??? ??? ??? ?sib=sib.nextSibling;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?sib.style.height="84px";
?? ??? ??? ?}else{
?? ??? ??? ??? ?aA.style.borderTop="1px solid #ccc";
?? ??? ??? ??? ?aA.style.height="13px";
?? ??? ??? ??? ?aA.style.lineHeight="13px";
?? ??? ??? ??? ?var sib=aA.nextSibling;
?? ??? ??? ??? ?while(sib.nodeType!=1){
?? ??? ??? ??? ??? ?sib=sib.nextSibling;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?sib.style.height="0";
?? ??? ??? ?}
?? ??? ?}
??? }
?? ?
??? </script>
? ??? ?
?
</head>
<body>
<!-- HTML頁面布局 -->
?? ?<ul id="u1">
?? ??? ?<li><a href="#" onclick="clk(this)" id="a1">房產</a>
?? ??? ?<div id="block1">
?? ??? ??? ?<a href="#">275萬購昌平鄰鐵三居</a>
?? ??? ??? ?<a href="#">總價20萬買一居</a>
?? ??? ??? ?<a href="#">200萬內購五環三居</a>
?? ??? ??? ?<a href="#">140萬安家東三環</a>
?? ??? ??? ?<a href="#">北京首現零首付樓盤</a>
?? ??? ??? ?<a href="#">53萬購東5環50平</a>
?? ??? ??? ?<a href="#">京樓盤直降5000</a>
?? ??? ??? ?<a href="#">中信府 公園樓王現房</a>
?? ??? ?</div>
?? ??? ?</li>
?? ??? ?<li><a href="#" onclick="clk(this)">家居</a>
?? ??? ?<div id="block2">
?? ??? ??? ?<a href="#">40平出租屋大改造</a>
?? ??? ??? ?<a href="#">美少女的混搭小窩</a>
?? ??? ??? ?<a href="#">經典清新簡歐愛家</a>
?? ??? ??? ?<a href="#">90平老房煥發新生</a>
?? ??? ??? ?<a href="#">新中式的酷色溫情</a>
?? ??? ??? ?<a href="#">66平撞色活潑家居</a>
?? ??? ??? ?<a href="#">瓷磚就像選好老婆</a>
?? ??? ??? ?<a href="#">衛生間煙道的設計</a>
?? ??? ?</div>
?? ??? ?</li>
?? ??? ?<li><a href="#" onclick="clk(this)">二手房</a>
?? ??? ?<div id="block3">
?? ??? ??? ?<a href="#">通州豪華3居260萬</a>
?? ??? ??? ?<a href="#">二環稀缺2居250w甩</a>
?? ??? ??? ?<a href="#">西3環通透2居290萬</a>
?? ??? ??? ?<a href="#">130萬2居限量搶購</a>
?? ??? ??? ?<a href="#">黃城根小學學區僅260萬</a>
?? ??? ??? ?<a href="#">121平70萬拋!</a>
?? ??? ??? ?<a href="#">獨家別墅280萬</a>
?? ??? ??? ?<a href="#">蘇州橋2居優惠價248萬</a>
?? ??? ?</div>
?? ??? ?</li>
?? ?</ul>
?
</body>
</html>
在bl的class中定義了border-bottom為1px #ccc，但是自動幫我也補了個上邊框，就算自己定義了border-top，那個灰色的邊框也在，怎么也去不掉，但是一把border-bottom注釋掉立刻就上下邊框都沒有了。。這個是因為什么出現的呢？
附圖：
注釋前
注釋后：
2016-01-04
首先你給的CSS代碼有問題：我幫你修改如下,
????#u1?li{?float:?left;} ????li>a{ ???????????display:?block; ???????????width:70px; ???????????height:13px; ???????????/*float:?left;*/這里并不是a浮動，而是li浮動，所以注釋改行，添加上面的樣式 ???????????line-height:?13px; ???????????text-align:?center; ???????????margin-left:?10px; ???????????border-top:1px?solid?#ccc; ???????????border-left:1px?solid?#ccc; ???????????border-right:1px?solid?#ccc; ???????????padding:?10px?10px; ???????????background-color:?#fff; ????} ?????.bl{//找了半天沒有發現bl在哪，其實b1指定就是div，所以把.b1替換為div ????????position:?absolute; ????????left:0; ????????top:34px; ????????margin-left:?5px; ????????width:?350px; ????????line-height:?20px; ????????border-top:?3px?solid?#0fe; ????????border-left:?1px?solid?#ccc; ????????border-right:?1px?solid?#ccc; ????????border-bottom:?1px?solid?#ccc; ????????overflow:?hidden; ????????z-index:?-9999; ????}上面是基本的CSS修改，下面說出現問題的原因，
了解一些這句話：
CSS 規范指出，邊框繪制在“元素的背景之上”。這很重要，因為有些邊框是“間斷的”（例如，點線邊框或虛線框），元素的背景應當出現在邊框的可見部分之間。
CSS2 指出背景只延伸到內邊距，而不是邊框。后來 CSS2.1 進行了更正：元素的背景是內容、內邊距和邊框區的背景。(重點)大多數瀏覽器都遵循 CSS2.1 定義，不過一些較老的瀏覽器可能會有不同的表現。
由于為每一個div都設置了：
又分別設置了：
#block1{height:?84px;} #block2{height:?0;}//邊框不會隱藏 #block3{height:?0;}//邊框不會隱藏高度為0并不意味著border為就看不見了，所以出現那種情況的原因是border-top:3px solid #0fe; 加上border-bottom:1px solid #ccc;? 共 4px的高度，所以底下會有一條 bottom:1px solid #ccc;高度的border，那是由于#block2和#block3的border引起的，因為他們的border寬度和為4px; 所以#block1 border-top寬度3px無法覆蓋4px;所以就會出現那樣一條邊框！
解決方案：
#block1{display:block;} #block2{display:none;}//邊框也會隱藏 #block3{display:none;}//邊框也會隱藏你的代碼切換時還有這樣的問題！你先嘗試解決一下，有問題再問我！