Loại bỏ gạch chân cứng đầu khỏi liên kết

542

Tôi đang cố gắng để có một liên kết hiển thị màu trắng, không có gạch chân. Màu văn bản hiển thị chính xác là màu trắng, nhưng phần gạch chân màu xanh vẫn cố chấp. Tôi đã thử text-decoration: none;và text-decoration: none !important;trong CSS để loại bỏ gạch chân liên kết. Không làm việc.

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

Mở rộng đoạn trích

Làm thế nào tôi có thể loại bỏ gạch chân màu xanh khỏi liên kết?

css hyperlink underline

— dmr
nguồn

1

Vâng, nó sẽ biến mất khi bạn làm trang trí văn bản: không có. Bạn có chắc chắn rằng bạn đang áp dụng điều này cho đúng yếu tố? Bạn có thể cung cấp mã ví dụ?

— Davor Lucic

Trang trí văn bản ở đâu: không được sử dụng?

— đưa đón87

771

Như tôi dự đoán, bạn không áp dụng text-decoration: none;cho một neo ( .boxhead a) mà là một phần tử span ( .boxhead).

Thử cái này:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

— Hương vị Lucic
nguồn

12

Nhưng điều gì sẽ xảy ra nếu bạn có văn bản xung quanh khoảng đó và bạn muốn văn bản xung quanh có gạch chân liên kết, nhưng văn bản trong khoảng đó không có gì?

— JMTyler

4

@rebus, bạn không thể? Tại sao không? Nguyên nhân ít nhất là IE7 + và FireFox 4+, nhưng không phải vì Chrome vì một số lý do. Đây là mã tôi phải làm việc trong các trình duyệt không phải Chrome mà tôi đã kiểm tra: .toc-list a > span{text-decoration:none !important;} Tôi nghĩ rằng câu hỏi của @ JMTyler là hợp pháp; Tôi đang tìm kiếm giải pháp tương tự.

— Tony Topper

7

Có vẻ text-decorationnhư không hỗ trợ ghi đè lên các thẻ lồng nhau, như được gợi ý ở trên. Khi bạn đã a { text-decoration: underline; }áp dụng quy tắc, bạn không thể hủy áp dụng, ví dụ như với a .wish_this_were_not_underlined { text-decoration: none; }. Tôi không thể tìm thấy tài liệu tham khảo cho điều này nhưng đó là kinh nghiệm của tôi (trong Chrome).

— Một phần mây

2

Giống như những người khác ở trên, tôi không thể gạch chân văn bản bằng cách áp dụng text-decoration: none;vì vậy thay vào đó chúng tôi chọn cách ẩn dòng bằng cách sử dụng text-decoration: underline; text-decoration-color: white;. / hack

— Ryan Burbidge

1

nếu bạn chỉ cố gắng xóa phần gạch chân khỏi một phần tử bên trong một neo, chứ không phải toàn bộ phần neo. bạn cần biến phần tử bên trong thành một khối nội tuyến như vậy: .boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }

— Patrick Denny

213

Thẻ neo (liên kết) cũng có các lớp giả như đã truy cập, di chuột, liên kết và hoạt động. Đảm bảo rằng kiểu của bạn được áp dụng cho (các) trạng thái được đề cập và không có kiểu nào khác xung đột.

Ví dụ:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

Xem W3.org để biết thêm thông tin về các lớp giả hành động của người dùng: hover ,: active và: Focus.

— JYelton
nguồn

5

Tôi nghĩ bạn có nghĩa là a:linkkhi bạn nóia:click

— artlung

6

Đây phải là câu trả lời được chấp nhận thực tế, vì tôi đang gặp vấn đề tương tự SAU khi nhấp vào liên kết nút của mình. Các tài sản truy cập vẫn chuyển sang màu tím khi tôi trở lại trang.

— Doresoom

33

text-decoration: none !importantnên loại bỏ nó .. Bạn có chắc chắn không có một border-bottom: 1px solidẩn giấu? (Theo dõi kiểu được tính toán trong Fireorms / F12 trong IE)

— Alex K
nguồn

4

Cài đặt border-bottom-style: none;cố định nó cho tôi.

— Helder S Ribeiro

27

Chỉ cần thêm thuộc tính này vào thẻ neo của bạn

style="text-decoration:none;"

Thí dụ:

<a href="page.html"  style="text-decoration:none;"></a>

Hoặc sử dụng cách CSS.

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

— Nagarajan SR
nguồn

16

Đôi khi những gì bạn nhìn thấy là một cái bóng hộp, không phải là một gạch chân văn bản.

Hãy thử điều này (sử dụng bất kỳ bộ chọn CSS nào phù hợp với bạn):

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

— jeffmjack
nguồn

1

Điều này nên là câu trả lời .. Đôi khi, bóng hộp cho ảnh hưởng gạch chân.

— Bhargav

Đó là một câu trả lời, nhưng không phải là tốt nhất. Phạm vi của những người là toàn cầu và không cụ thể. Một cái gì đó như thế này nên thực hiện các mẹo : .otherPage a:link {text-decoration:none;}; lặp lại rằng để truy cập, hoạt động và di chuột nếu cần thiết.

— Ajowi

14

Bạn đã bỏ lỡ text-decoration:nonecho thẻ neo . Vì vậy, mã nên được theo sau.

.boxhead a {
    text-decoration: none;
}

<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

Mở rộng đoạn trích

Nhiều thuộc tính tiêu chuẩn cho trang trí văn bản

— Santosh Khalse
nguồn

9

Không nhìn thấy trang, khó có thể suy đoán.

Nhưng nó có vẻ với tôi như bạn có thể border-bottom: 1px solid blue;đang được áp dụng. Có lẽ thêm border: none;. text-decoration: none !importantđúng vậy, có thể bạn có một phong cách khác vẫn đang ghi đè CSS đó.

Đây là nơi sử dụng Thanh công cụ Firefox Web Developer rất tuyệt vời, bạn có thể chỉnh sửa CSS ngay tại đó và xem mọi thứ có hoạt động không, ít nhất là đối với Firefox. Nó ở dưới CSS > Edit CSS.

— nghệ thuật
nguồn

9

Theo quy định, nếu "gạch chân" của bạn không cùng màu với văn bản của bạn [và 'màu:' không bị ghi đè nội tuyến] thì nó không xuất phát từ "trang trí văn bản:" Nó phải là "viền dưới:"

Đừng quên đưa biên giới ra khỏi các lớp giả của bạn quá!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

Đoạn mã này giả định nó trên một neo, thay đổi thành trình bao bọc phù hợp ... và sử dụng tính đặc hiệu thay vì "! Quan trọng" sau khi bạn theo dõi nguyên nhân gốc rễ.

— Joel Crawford-Smith
nguồn

4

Trong khi các câu trả lời khác là chính xác, có một cách dễ dàng để thoát khỏi phần gạch chân trên tất cả các liên kết phiền phức đó:

a {
   text-decoration:none;
}

Điều này sẽ xóa phần gạch chân khỏi MỌI LIÊN KẾT MỘT SỐ trên trang của bạn!

— yarz-công nghệ
nguồn

đảm bảo thẻ trên thẻ neo và nội tuyến có thể tốt hơn vì bạn có thể muốn gạch chân trên các liên kết khác.

— Asuquo12

2

Nếu text-decoration: nonehoặc border: 0không hoạt động, hãy thử áp dụng kiểu nội tuyến trong html của bạn.

— Deke
nguồn

1

Chỉ cần sử dụng tài sản

border:0;

và bạn được bảo hiểm. Làm việc hoàn hảo cho tôi khi tài sản trang trí văn bản dint làm việc cả.

— MK Sandhu
nguồn

1

Không có câu trả lời nào làm việc cho tôi. Trong trường hợp của tôi đã có một tiêu chuẩn

a:-webkit-any-link {
text-decoration: underline;

trong mã của tôi. Về cơ bản dù đó là liên kết nào, màu văn bản sẽ chuyển sang màu xanh và liên kết vẫn giữ nguyên.

Vì vậy, tôi đã thêm mã ở cuối tiêu đề như thế này:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

và vấn đề không còn nữa.

— Neo
nguồn

1

  a {
    color: unset;
    text-decoration: unset;
  }

— itzhar
nguồn

0

Dưới đây là một ví dụ cho điều khiển LinkButton của biểu mẫu web asp.net:

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

Mã ẩn:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

— JoshYates1980
nguồn

0

Bạn đã sử dụng trang trí văn bản không có trong bộ chọn sai. Bạn cần kiểm tra xem bạn cần thẻ nào để trang trí.

Bạn có thể sử dụng mã này

.boxhead h2 a{text-decoration: none;}

HOẶC LÀ

.boxhead a{text-decoration: none !important;}

HOẶC LÀ

a{text-decoration: none !important;}

— Md Abul Bashar
nguồn

0

Đặt mã HTML sau trước <BODY>thẻ:

<STYLE>A {text-decoration: none;} </STYLE>

— qarly_blue
nguồn

0

Trong trường hợp của tôi, tôi đã tạo thành HTML kém. Liên kết nằm trong một <u>thẻ và không phải là một <ul>thẻ.

— mwilcox
nguồn

0

Như những người khác đã chỉ ra, có vẻ như bạn không thể ghi đè các kiểu trang trí văn bản lồng nhau ... NHƯNG bạn có thể thay đổi màu sắc trang trí văn bản.

Khi hack, tôi đã thay đổi màu trong suốt:

văn bản-trang trí-màu sắc: trong suốt;

— Bến
nguồn