為什么我的會(huì)出現(xiàn)這種情況？字體不對(duì)齊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font: normal 12px "微軟雅黑";
color: #000000;
}
ul {
list-style-type: none;
}
#tab-list {
width: 275px;
height: 190px;
margin: 20px auto;
}
#ul1 {
border-bottom: 1px solid #8B4513;
height: 32px;
}
#ul1 li {
display: inline- block;
width: 60px;
line-height: 30px;
text-align: center;
border: 1px solid #999;
border-bottom: none;
margin-left: 5px;
float: left
}
#ul1 li.active {
border-top: 2px solid #8B4513;
border-bottom: 2px solid #FFFFFF;
}
#tab-list div {
border: 1px solid #7396B8;
border-top: none;
}
#tab-list div li {
font-size: 8px;
height: 30px;
line-height: 30px;
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
<script type="text/javascript">
? ? function ?b1() {
var cd = document.getElementById("ul1");
var caidan = cd.getElementsByTagName("li");
var i;
var div = document.getElementsByTagName("div");
for (i = 0;i<caidan.length;i++){
if (caidan[i].className == "active")
temp = i;
}
caidan[temp].className="";
caidan[0].className="active";
div[1].className="";
div[2].className="hide";
div[3].className="hide";
}
function ?b2() {
var cd = document.getElementById("ul1");
var caidan = cd.getElementsByTagName("li");
var i;
var div = document.getElementsByTagName("div");
for (i = 0;i<caidan.length;i++){
if (caidan[i].className == "active")
temp = i;
}
caidan[temp].className="";
caidan[1].className="active";
div[1].className="hide";
div[2].className="";
div[3].className="hide";
}
function ?b3() {
var cd = document.getElementById("ul1");
var caidan = cd.getElementsByTagName("li");
var i;
var div = document.getElementsByTagName("div");
for (i = 0;i<caidan.length;i++){
if (caidan[i].className == "active")
temp = i;
}
caidan[temp].className="";
caidan[2].className="active";
div[1].className="hide";
div[2].className="hide";
div[3].className="";
}
</script>
</head>
<body>
<div id="tab-list">
<ul id="ul1">
<li class="active" onmouseover="b1()" >1</li>
<li ?onmouseover="b2()">2</li>
<li ?onmouseover="b3()">3</li>
</ul>
<div style="clear: both">
<ul>
<li>275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居</li>
<li>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</li>
<li>北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平</li>
<li>京樓盤直降5000 中信府 公園樓王現(xiàn)房</li>
</ul>
</div>
<div class="hide">
<ul>
<li>40平出租屋大改造 美少女的混搭小窩</li>
<li>經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生</li>
<li>新中式的酷色溫情 66平撞色活潑家居</li>
<li>瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</li>
</ul>
</div>
<div class="hide">
<ul>
<li>通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</li>
<li>西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</li>
<li>黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!</li>
<li>獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</li>
</ul>
</div>
</body>
</html>
2016-10-30
第一個(gè)ul的高度為32px+邊框1px=33px；
當(dāng)鼠標(biāo)移到第一個(gè)ul里面的li時(shí)，li的高度為30px+邊框2+2=34px；因此對(duì)應(yīng)的li的高度會(huì)超過(guò)ul的高度，于是會(huì)字體錯(cuò)位，
為什么第一個(gè)li里面的字體不會(huì)錯(cuò)位，因?yàn)榈谝粋€(gè)字體的父元素div設(shè)置了clear:both；清除了第一個(gè)ul里面li的浮動(dòng)，因此整體位置會(huì)下移而不是錯(cuò)位；
修改方法：
方法1、第一個(gè)ul里面li的邊框改為1；
方法2、給另外幾個(gè)移位字體的div加上clear:both；
還有：代碼最后漏了一個(gè)</div>