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

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

источник

2009-07-16 gday

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

outline:none;

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

a { outline:none; }

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

источник

2009-07-16 01:09:41

Awesome. Есть ли что-то, чего вы не знаете? – gday

Контур является важной частью доступности. Это позволяет пользователям, которые не могут использовать мышь, чтобы заходить на страницу и видеть, какая ссылка имеет фокус. – Emily

Хорошая точка Эмили. Не понимал, что это необходимо для доступности. Тем не менее, сайт, который я проектирую, должен быть «design-y» - не максимально доступным. – gday

-1

Я считаю, что вам необходимо определить все правила для вашей ссылки, такие как ссылка, наведение, активный и посещенный.

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

источник

2009-07-16 01:06:40 TheTXI

Не забудьте «фокус»: ссылка, посетил, парение, фокус, активный, как правило, принимаются в качестве оптимального порядка. «Фокус» имеет важное значение для доступности (особенно, если контур по умолчанию отключен), поскольку стилизация элемента при фокусировке помогает тем, кто не может использовать мышь, видеть, когда они могут выполнить эквивалентное действие для нажатия. Как правило, хорошая идея состоит в том, чтобы «зависание» и «фокус» имели одинаковые стили. – NickFitz

-1

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

a:hover 
a:active

Коз при установке в CSS только с помощью, она будет меняться только статический вид на ссылку.

источник

2009-07-16 01:10:02 xandy

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

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

a { 
    outline: none; 
}

источник

2009-07-16 01:10:23 jeroen

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

ответ

Смежные вопросы