Làm cách nào để xóa đường viền xung quanh hình ảnh siêu liên kết?

Khi chúng tôi sử dụng Thay thế văn bản bằng CSS và đưa ra thụt lề thử nghiệm âm text-indent:-9999px. Sau đó, khi chúng ta nhấp vào liên kết đó, dòng Chấm xuất hiện như trong hình ảnh mẫu bên dưới. Giải pháp cho điều này là gì?

Đối với Xóa đường viền cho thẻ liên kết

a {outline : none;}

Xóa đường viền khỏi liên kết hình ảnh

a img {outline : none;}

Xóa đường viền khỏi liên kết hình ảnh

img {border : 0;}

Bạn có thể sử dụng thuộc tính CSS "outline" và giá trị "none" trên phần tử neo.

a {
outline: none;
}

Hy vọng rằng sẽ giúp.

Đối với Internet Explorer 9:

a:active, a:focus { 
 outline: none; 
 ie-dummy: expression(this.hideFocus=true);
}

Nguồn: http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a

Xin lưu ý rằng các kiểu tiêu điểm có lý do: nếu bạn quyết định xóa chúng, những người điều hướng qua bàn phím chỉ không biết những gì được lấy nét nữa, vì vậy bạn đang làm giảm khả năng truy cập trang web của mình.

(Giữ chúng đúng vị trí cũng giúp hỗ trợ những người dùng không thích sử dụng chuột)

Có cùng hiệu ứng đường viền trong Firefox và Internet Explorer (IE) , nó sẽ hiển thị khi bạn nhấp vào liên kết nào đó.

Mã này sẽ chỉ sửa chữa IE:

a:active { outline: none; }.

Và cái này sẽ sửa cả Firefox và IE :

:active, :focus { outline: none; -moz-outline-style: none; }

Mã cuối cùng phải được thêm vào biểu định kiểu của bạn, nếu bạn muốn xóa các đường viền liên kết khỏi trang web của mình.

đưa mã này vào bảng định kiểu của bạn

img {border : 0;}

a img {outline : none;}

Tôi hy vọng điều này hữu ích với một số bạn, nó có thể được sử dụng để xóa đường viền khỏi liên kết, hình ảnh và flash và khỏi MSIE 9:

    a, a:hover, a:active, a:focus, a img, object, embed {
    outline: none;
    ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
    }

Đoạn mã dưới đây có thể ẩn đường viền hình ảnh:

    img {
    border: 0;
    }

Nếu bạn muốn hỗ trợ Firefox 3.6.8 nhưng không hỗ trợ Firefox 4 ... Nhấp vào kiểu nhập liệu = image cũng có thể tạo ra đường viền chấm chấm, để xóa nó trong các phiên bản cũ của firefox, bạn sẽ thực hiện thủ thuật sau:

   input::-moz-focus-inner { 
   border: 0; 
   }

IE 9 trong một số trường hợp không cho phép xóa đường viền chấm xung quanh các liên kết trừ khi bạn đưa thẻ meta này vào giữa và trong các trang của mình:

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

Đây là phiên bản mới nhất hoạt động trên Google Chrome

:link:focus, :visited:focus {outline: none;}

-moz-user-focus: ignore; trong các trình duyệt dựa trên Gecko (bạn có thể cần! quan trọng, tùy thuộc vào cách nó được áp dụng)

Sử dụng Như thế này cho HTML 4.01

<img src="image.gif" border="0">

Bạn có thể đưa overflow:hiddenvào thuộc tính với thụt lề văn bản và dòng chấm chấm đó, kéo dài ra khỏi trang, sẽ tách rời.

Tôi đã xem một vài bài đăng về việc loại bỏ tất cả các phác thảo cùng nhau. Hãy cẩn thận khi làm điều này vì bạn có thể làm giảm khả năng truy cập của trang web.

a:active { outline: none; }

Cá nhân tôi sẽ chỉ sử dụng thuộc tính này, vì nếu :hoverthuộc tính có cùng thuộc tính css, nó sẽ ngăn các đường viền hiển thị cho những người đang sử dụng bàn phím để điều hướng.

Hy vọng điều này sẽ giải quyết vấn đề của bạn.

để Xóa liên kết href của Đường viền chấm chấm, bạn có thể ghi vào tệp css của mình:

a {
   outline: 0;
}

Tôi dám cá rằng hầu hết người dùng không phải là kiểu người dùng sử dụng bàn phím làm điều khiển điều hướng. Sau đó, có chấp nhận được việc làm phiền phần lớn người dùng của bạn đối với một nhóm nhỏ thích sử dụng điều hướng bằng bàn phím không? Câu trả lời ngắn gọn - phụ thuộc vào người dùng của bạn là ai.

Ngoài ra, tôi không thấy trải nghiệm này theo cách tương tự trong Firefox và Safari. Vì vậy, lập luận này dường như chủ yếu dành cho IE. Tất cả thực sự phụ thuộc vào cơ sở người dùng của bạn và mức độ hiểu biết của họ - cách họ sử dụng trang web.

Nếu bạn thực sự muốn biết bạn đang ở đâu và bạn là người dùng bàn phím, bạn luôn có thể nhìn vào thanh trạng thái khi bạn nhập trang web.

Điều này hoàn toàn phù hợp với tôi

a img {border:none;}

Bất kỳ hình ảnh nào có liên kết sẽ có đường viền xung quanh hình ảnh để giúp cho biết đó là liên kết với các trình duyệt cũ hơn. Thêm border = "0" vào thẻ IMG HTML của bạn sẽ ngăn ảnh đó có đường viền xung quanh ảnh.

Tuy nhiên, việc thêm border = "0" vào mọi hình ảnh sẽ không chỉ tốn thời gian mà còn làm tăng kích thước tệp và thời gian tải xuống. Nếu bạn không muốn bất kỳ hình ảnh nào của mình có đường viền, hãy tạo quy tắc CSS hoặc tệp CSS có mã bên dưới.

img {border-style: none; }

Nếu giải pháp trên không hiệu quả với bất kỳ ai. Hãy thử cái này

a {
 box-shadow: none;
}

Tôi không chắc đây có còn là vấn đề đối với cá nhân này hay không, nhưng tôi biết nó có thể là một nỗi đau cho nhiều người nói chung. Được cho là, các giải pháp trên sẽ hoạt động trong một số trường hợp, nhưng nếu bạn đang sử dụng CMS như WordPress, và các đường viền được tạo bởi plugin hoặc chủ đề, rất có thể bạn sẽ không giải quyết được vấn đề này, tùy thuộc vào cách bạn thêm CSS.

Tôi khuyên bạn nên có một StyleSheet riêng (ví dụ: sử dụng plugin ' Lazyest StyleSheet ') và nhập CSS sau vào bên trong nó để ghi đè kiểu bắt buộc của plugin (hoặc chủ đề) hiện có:

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

Việc thêm ' ! Important ' vào quy tắc cụ thể sẽ khiến quy tắc này được ưu tiên tạo ngay cả khi quy tắc có thể nằm ở nơi khác (cho dù quy tắc đó nằm trong plugin, chủ đề, v.v.).

Điều này giúp tiết kiệm thời gian khi phát triển. Chắc chắn, bạn có thể tìm kiếm nguồn gốc, nhưng khi bạn đang làm việc trên nhiều dự án hoặc cần thực hiện cập nhật (nơi các thay đổi của bạn có thể bị ghi đè [ không được đề xuất! ]) Hoặc thêm các plugin hoặc chủ đề mới, thì đây là cách tốt nhất truy đòi để tiết kiệm thời gian.

Hy vọng điều này sẽ giúp ... Hòa bình!

Có, chúng tôi có thể sử dụng. CSS đặt lại như a {outline:none}và cũng

a:focus, a:active {outline:none} để có Phương pháp hay nhất trong việc Đặt lại CSS, Giải pháp Tốt nhất đang sử dụng phổ biến :focus{outline:none}Nếu bạn vẫn còn Lựa chọn Tốt nhất, vui lòng Chia sẻ