IE: loại bỏ gạch dưới trên phần tử giả

Question

Trên Chrome và Firefox, nếu tôi áp dụng văn bản trang trí: gạch dưới trên thẻ, theo mặc định gạch chân không áp dụng cho phần tử giả. Nhưng trên trình duyệt IE, tôi không thể xóa nó. Tôi muốn liên kết được gạch dưới, chứ không phải phần tử giả. Nó hoạt động nếu tôi thêm một khoảng bên trong và đặt gạch chân vào nó, nhưng tôi muốn biết nếu nó có thể được thực hiện mà không cần đánh dấu bổ sung.

a{ \t \t 
 
\t padding-left: 9px; 
 
\t position:relative; 
 
\t display:inline-block; 
 

 
} 
 
a:before{ 
 
\t content:'\203A\00a0'; 
 
\t position:absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t display: inline-block; 
 
} 
 

 
#underline{ 
 
\t text-decoration: none; \t \t \t 
 
} 
 
#underline:hover{ 
 
\t text-decoration:underline; 
 
} 
 
/* special for IE */ 
 
#underline:hover:before 
 
{ 
 
\t text-decoration:none !important; \t /* does nothing ! */ 
 
} 
 

 
#color{ 
 
\t color:green; 
 
} 
 
#color:hover{ 
 
\t color:red; 
 
} 
 
#color:hover:before{ 
 
\t color:green; \t /* work ! */ 
 
} 
 

 
#span{ 
 
\t text-decoration: none; 
 
} 
 
#span:hover span{ 
 
\t text-decoration: underline; 
 
}

<a href="#" id="underline">underline</a> 
 
<br> 
 
<a href="#" id="color">color</a> 
 
<br> 
 
<a href="#" id="span"><span>with span</span></a>

Answer 1

Như text-decoration: underline; không thể được ghi đè trong IE bạn có thể sử dụng border-bottom: 1px solid green; để thay thế. Điều này sau đó có thể được ghi đè trên :before bằng cách đặt màu đường viền của nó thành màu nền (trong trường hợp này là màu trắng). Điều này sẽ chỉ hoạt động trên nền màu đồng nhất.

a { \t \t 
 
    color: green; 
 
    display: inline-block; 
 
    padding-left: 9px; 
 
    position: relative; 
 
    text-decoration: none; 
 
} 
 
a:before { 
 
    content: '\203A\00a0'; 
 
    display: inline-block; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
a:hover { 
 
    border-bottom: 1px solid green; 
 
} 
 
a:hover:before { 
 
    border-bottom: 1px solid white; 
 
}

<a href="#" id="underline">Hover to check underline</a>

Answer 2

Dường như IE không cho phép bạn ghi đè lên text-decoration trong pseudoelement nếu nó không được đặt trong nó. Trước tiên hãy để phần tử giả được gạch chân - trang trí văn bản: gạch dưới - và sau đó ghi đè lên điều này với textdecoration: none.

#underline:hover:before 
 
{ 
 
\t text-decoration:underline; 
 
} 
 

 
#underline:hover:before 
 
{ 
 
\t text-decoration:none; 
 
}

Answer 3

bạn có thể thêm video này vào css của bạn. điều này đã giúp tôi trong IE

a {text-decoration:none;} 
a:hover {text-decoration:underline;} 
a:before,a:after { text-decoration:underline;} 
a:before,a:after, 
a:hover:before,a:hover:after {text-decoration:none;}