UC知道急急,请问css中li边框的问题?
来源：百度知道 编辑：UC知道 时间：2024/06/17 00:45:38
急急,请问css中li边框的问题?
<html>
<head>
<title></title>
<style type="text/css">
ul{
list-style-type:none;
}
li{
height:30px;
float:left;
margin-right:3px;
border:1px solid red;
}
li a{
text-decoration:none;
display:block;
background:yellow;
padding:6px;
}
li a:link,li a:visited{
color:black;
font-family:arial;
}
</style>
</head>
<body>
<ul>
<li id="a"><a href="a.html">1html</a></li>
<li id="b"><a href="b.html">2html</a></li>
<li id="c"><a href="c.html">3html</a></li>
<li id="d"><a href="d.html">4html</a></li>
</ul>
</body>
</html>
急,为什么我一加上li a:link,li a:visited{
<html>
<head>
<title></title>
<style type="text/css">
ul{
list-style-type:none;
}
li{
height:30px;
float:left;
margin-right:3px;
border:1px solid red;
}
li a{
text-decoration:none;
display:block;
background:yellow;
padding:6px;
}
li a:link,li a:visited{
color:black;
font-family:arial;
}
</style>
</head>
<body>
<ul>
<li id="a"><a href="a.html">1html</a></li>
<li id="b"><a href="b.html">2html</a></li>
<li id="c"><a href="c.html">3html</a></li>
<li id="d"><a href="d.html">4html</a></li>
</ul>
</body>
</html>
急,为什么我一加上li a:link,li a:visited{
解决方法一:把li a:link,li a:visited{color:black;font-family:arial;}里面的font-family:arial去掉即可;由于font-family:arial的字体高使a高度超出li的高,所以在FF里底边没有了,而ie允许这个错误所以底边还在;
解决方法二:给a一个高 例:
li a{
text-decoration:none;
display:block;
background:yellow;
padding:6px;
line-height:18px;
}
解决方法三:给li增加高,并且给a字体高 例:
li{
height:35px;
float:left;
margin-right:3px;
border:1px solid red;
}
li a{
text-decoration:none;
display:block;
background:yellow;
padding:6px;
line-height:23px;
}
恩，楼上说的很对。
所以我就没有必要在解释了。。。
恩，一楼说的很对。
所以我就没有必要在解释了。。。