Установить стиль рамки: нет; на моих тегах привязки, но граница появляется, когда я нажимаю на ссылку - почему? - PullRequest
Новая
       13

Установить стиль рамки: нет; на моих тегах привязки, но граница появляется, когда я нажимаю на ссылку - почему?

6 голосов
/ 16 июля 2009

Как вы можете видеть из приведенного ниже примера, у меня есть черный фон и красные ссылки, чтобы подчеркнуть эту проблему с пунктирными границами, которые отображаются на моих ссылках при нажатии на них. Я добавил 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>

Ответы [ 4 ]

12 голосов
/ 16 июля 2009

граница, которую вы видите, называется контуром. вы можете избавиться от него, включив этот стиль в ваши a правила: 

outline:none;

лично я всегда определяю это как общее a правило в верхней части моих таблиц стилей (мне действительно не нравятся контуры, хотя я знаю, что они имеют применение) 

a { outline:none; }

надеюсь, это поможет

3 голосов
/ 16 июля 2009

Это не граница, это контур.

Вы можете отключить его, установив: 

a {
    outline: none;
}
0 голосов
/ 16 июля 2009

Вы пытались использовать эти псевдо-селекторы в ссылках? как 

a:hover
a:active

Coz, когда вы устанавливаете CSS только с помощью a, это только изменит статический вид ссылки.

0 голосов
/ 16 июля 2009

Полагаю, вам необходимо определить все правила для вашей ссылки, такие как Ссылка, Наведение, Активная и Посещаемая.

Дополнительная информация: http://www.echoecho.com/csslinks.htm

...