核心提示：html解决边框重合问题、鼠标移动文字上文字抖动问题!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titleTitle/titlestyle*{padd...
html解决边框重合问题、鼠标移动文字上文字抖动问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0px;
margin: 0px;
}
ul{
list-style:none;
width: 510px;
margin-left: -1px;/*解决的左侧边框重合的问题，给整体的ul向左移动1像素*/
}
li{
float: left;
width: 100px;
height: 40px;
text-align: center;
padding: 0px 1px;/*为了解决鼠标移动到文字上文字抖动的问题，所以采用这种办法，用替代的方式*/
cursor: pointer;
font: 400 18px/40px "simsun";
}
li:hover{
font-weight: 700;
color: #f40;/*width:98px;*/
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0px;/*同上，解决的文字抖动的问题*/
}
/*另外解决文字抖动还可以这样设置,给它的宽度设置为98pxli:hover{width:98px}*/
.box{
width: 500px;
height: 400px;
margin: 100px auto;
overflow: hidden;
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<p class="box">
<ul>
<li>公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
</p>
</body>
</html>
