设置边框样式：无； 在我的锚标签上，但当我单击链接时会显示边框 - 为什么？
正如您从下面的示例中看到的，我有一个黑色背景和红色链接，以强调单击链接时出现在链接上的虚线边框的问题。 我添加了 border-style:none 但似乎没有任何效果。 是否有其他方法可以删除单击链接时出现在链接周围的虚线边框？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body
{
height: 100%;
margin: 0;
padding: 0;
font-weight:normal;
font-size:12pt;
font-family: Verdana, Arial, Helvetica, serif, sans-serif;
background:black;
}
#linksouter
{
margin: 0;
padding: 0;
border-style:solid;
border-width:0px;
position:absolute;
top: 0px;
left: 0px;
width: 80px;
text-align:left;
}
#linksinner
{
margin: 80px 0 0 .5em;
width:100%;
display:inline;
height:100%;
}
#linksinner a
{
color:red;
text-decoration: none;
display:block;
margin: 5px 0 0 0;
border-style:none;
}
</style>
</head>
<body>
<div id="linksouter">
<div id="linksinner">
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
</div>
</div>
</body>
</html>
As you can see from the example below, I have a black background and red links to emphasize this problem of dotted borders showing up on my links when they are clicked. I added border-style:none but it doesn't seem to have any effect. Is there some other way to remove the dotted border appearing around the links when they are clicked?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body
{
height: 100%;
margin: 0;
padding: 0;
font-weight:normal;
font-size:12pt;
font-family: Verdana, Arial, Helvetica, serif, sans-serif;
background:black;
}
#linksouter
{
margin: 0;
padding: 0;
border-style:solid;
border-width:0px;
position:absolute;
top: 0px;
left: 0px;
width: 80px;
text-align:left;
}
#linksinner
{
margin: 80px 0 0 .5em;
width:100%;
display:inline;
height:100%;
}
#linksinner a
{
color:red;
text-decoration: none;
display:block;
margin: 5px 0 0 0;
border-style:none;
}
</style>
</head>
<body>
<div id="linksouter">
<div id="linksinner">
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您看到的边界称为轮廓。 您可以通过将此样式放入您的
a规则中来摆脱它：就我个人而言，我总是将其定义为样式表顶部附近的总括
a规则（我真的不喜欢轮廓即使我知道它们有用途）希望这有帮助
the border you see is called an outline. you can get rid of it by putting this style into your
arules:personally i always define it as a blanket
arule near the top of my stylesheets (i really dislike outlines even though i know they have a use)hope this helps
这不是边界，而是轮廓。
您可以通过设置禁用它：
That´s not the border, it is the outline.
You can disable it by setting:
我相信您需要为链接定义所有规则，例如“链接”、“悬停”、“活动”和“已访问”。
更多信息：http://www.echoecho.com/csslinks.htm
I believe you need to define all the rules for your link such as Link, Hover, Active, and Visited.
More information: http://www.echoecho.com/csslinks.htm
您是否尝试过在链接上使用这些伪选择器？
就像
Coz 一样，当您仅使用 a 设置 css 时，它只会更改链接上的静态外观。
Have you tried using those pseudo selectors on links?
like
Coz when you set the css in just using a, it will only change the static appearance on the link.