2009-07-16 13 views
6

Như bạn có thể thấy từ ví dụ bên dưới, tôi có một nền đen và các liên kết màu đỏ để nhấn mạnh vấn đề đường viền chấm chấm này hiển thị trên các liên kết của tôi khi chúng được nhấp. Tôi đã thêm border-style:none nhưng dường như không có bất kỳ ảnh hưởng nào. Có cách nào khác để xóa đường viền chấm chấm xuất hiện quanh các liên kết khi chúng được nhấp không?Đặt kiểu đường viền: none; trên các thẻ neo của tôi nhưng biên giới hiển thị khi tôi nhấp vào một liên kết - tại sao?

<!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> 

Trả lời

12

đường viền bạn thấy được gọi là đường viền. bạn có thể thoát khỏi nó bằng cách đặt phong cách này vào a quy tắc của bạn:

outline:none; 

cá nhân tôi luôn xác định nó như một quy luật chăn a gần đầu stylesheets của tôi (tôi thực sự không thích vạch ra mặc dù tôi biết họ có một sử dụng)

a { outline:none; } 

hy vọng điều này giúp

+0

Tuyệt vời. Có điều gì bạn không biết? – gday

+3

Đường viền là một phần quan trọng trong khả năng truy cập. Nó cho phép người dùng không thể sử dụng chuột để tab xung quanh trang và xem liên kết nào đã tập trung. – Emily

+0

Điểm tốt Emily. Không nhận ra nó là cần thiết cho khả năng tiếp cận. Tuy nhiên, trang web tôi đang thiết kế được dự định là 'thiết kế-y' - không thể truy cập tối đa. – gday

-1

Tôi tin rằng bạn cần xác định tất cả các quy tắc cho liên kết của bạn như Liên kết, Di chuột, Hoạt động và Đã truy cập.

Thông tin khác: http://www.echoecho.com/csslinks.htm

+0

Đừng quên "tập trung": liên kết, truy cập, di chuột, tập trung, hoạt động được chấp nhận chung như trình tự tối ưu. "Focus" rất quan trọng đối với khả năng truy cập (đặc biệt nếu đường viền mặc định đã bị vô hiệu hóa) như tạo kiểu cho một phần tử khi nó có tiêu điểm giúp những người không thể sử dụng chuột để xem khi nào họ có thể thực hiện hành động tương đương. Nói chung, một ý tưởng hay là làm cho "di chuột" và "tiêu điểm" có cùng kiểu. – NickFitz

-1

bạn đã thử sử dụng những selectors giả trên liên kết? như

a:hover 
a:active 

Coz khi bạn thiết lập các css trong chỉ sử dụng một, nó sẽ chỉ thay đổi hình thức tĩnh vào liên kết.

3

Đó không phải là đường viền, đó là đường viền.

Bạn có thể vô hiệu hóa nó bằng cách thiết lập:

a { 
    outline: none; 
} 
Các vấn đề liên quan