Kiểu trang trí văn bản kế thừa

Question

Làm cách nào để phủ nhận hoặc xóa kiểu bố cục văn bản của bố mẹ? Ví dụ như sau, cả văn bản và neo đều có trang trí văn bản của dòng, có cách nào để không áp dụng cho thẻ liên kết không?

<span style="text-decoration:line-through;"> 
 
    Dead Text 
 
    <a href="#" style="text-decoration:underline;color:Red;">Not Dead Text</a> 
 
</span>

LƯU Ý: gói các văn bản bên trong một khoảng không là một lựa chọn dễ dàng với những gì tôi đã vì vậy tôi đang tìm kiếm một giải pháp dựa trên phong cách css nếu có thể.

Answer 1

Tôi không tin điều đó là có thể. Từ SitePoint:

Ngoài ra, trang trí văn bản trên hộp inline được trả lại dọc theo toàn bộ hộp, thậm chí nếu nó chứa các hộp hậu duệ. Điều này cũng có thể xuất hiện tương tự như số kế thừa. Bất kỳ trang trí văn bản nào cài đặt trên hộp hậu duệ đều không bao giờ có thể “hoàn tác” trang trí văn bản của hộp tổ tiên .

Answer 2

Các dòng sau trong câu trả lời được chấp nhận là không đúng:

Bất kỳ văn bản trang trí thiết lập trên một hộp hậu duệ có thể không bao giờ “undo” những trang trí văn bản của một hộp cúng tổ tiên.

Không bao giờ nói không bao giờ, phải không?

tôi đã không tìm thấy một giải pháp cho IE chưa (trừ khi bạn tình cờ được làm việc với một kịch bản mà các gạch ngang được đặt trên một <TD>) tuy nhiên nó là nhất có thể cho các trình duyệt khác, mặc dù bạn sẽ phải chiến đấu bên cạnh -hiệu ứng của giải pháp.

Xem cho chính mình tại http://result.dabblet.com/gist/3713284/

Nói tóm lại: chỉ cần thêm display:table; để phong cách của trẻ. Vì một số lý do trong FF, bạn có thể sử dụng bất kỳ số nào trong số table, block, list-item hoặc table-caption nhưng chúng không hoạt động trong Safari/Chrome.

Nó sử dụng mã bên dưới:

<span style="text-decoration:line-through;"> 
 
    Dead Text 
 
    <a href="#" style="text-decoration:underline;color:Red;">Undesired strikethrough</a> 
 
</span> 
 

 
<div style="text-decoration:line-through;"> 
 
    Dead Text 
 
    <a href="#" style="text-decoration:underline;color:Red; display: table;">display: table in a div</a> 
 
</div> 
 

 
<span style="text-decoration:line-through;"> 
 
    Dead Text 
 
    <a href="#" style="text-decoration:underline;color:Red; display: table;">display: table in a span</a> 
 
</span> 
 

 
<span style="text-decoration:line-through; display: block;"> 
 
    Dead Text 
 
    <a href="#" style="text-decoration:underline;color:Red; display: table;">display: table in a span with "display:block;"</a> 
 
</span> 
 

 
<span style="text-decoration:line-through; display: table-cell;"> 
 
    Dead Text 
 
    <a href="#" style="text-decoration:underline;color:Red; display: table;">display: table in a span with "display:table-cell;"</a> 
 
</span> 
 

 
<span style="text-decoration:line-through;"> 
 
    Dead Text 
 
    <a href="#" style="text-decoration:underline;color:Red; display: list-item;">display: list-item</a> 
 
</span> 
 

 
<span style="text-decoration:line-through;"> 
 
    Dead Text 
 
    <a href="#" style="text-decoration:underline;color:Red; display: table-caption;">display: table-caption;</a> 
 
</span>

Answer 3

Tôi chỉ tìm thấy, rằng nếu bạn đặt position: absolute cho khối, nó sẽ làm việc cả trong chrome và FF:

<span style="text-decoration:line-through;"> 
 
Dead Text 
 
<a href="#" style="text-decoration:underline;color:Red;">This not works</a> 
 
</span> 
 
<br/> 
 
<span style="text-decoration:line-through;"> 
 
Dead Text 
 
<a href="#" style="position: absolute;margin-left: 5px;text-decoration:underline;color:Red;">This works</a> 
 
</span>

Xấu xí, nhưng có thể giúp trong một số trường hợp;