상속 된 텍스트 장식 스타일

Question

부모님 텍스트 장식 스타일을 무효화하거나 삭제하는 방법은 무엇입니까? 예를 들어 다음과 같이 텍스트와 앵커에는 줄 맞춤 텍스트 장식이 있습니다. 앵커 태그에 적용되지 않는 방법이 있습니까?

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

참고 : 스팬의 내부 텍스트를 포장하는 것은 내가 그래서 CSS 스타일 가능하면 기반으로하는 솔루션을 찾고있는 것과 쉬운 옵션이 아닙니다.

Answer 1

나는 그것이 가능하다고 생각하지 않습니다. SitePoint에서 :

는

또한, 전체 박스를 따라 렌더링 인라인 박스에 텍스트 장식, 그것은 후손 상자에 포함 된 경우에도. 이것 역시 상속과 유사하게 보일 수 있습니다. 자손 상자의 모든 텍스트 장식 설정은 상위 상자의 텍스트 장식을 "실행 취소"할 수 없습니다.

Answer 2

허용 대답에 다음 줄이 잘못되었습니다 :

는

자손 상자의 모든 텍스트 장식 설정은 조상 상자의 텍스트 장식을 "취소하지"않을 수 있습니다.

결코 절대로 말하지 마시시겠습니까? 그러나 그것은 다른 브라우저 가능한이다 (당신은 취소 선이 <TD>에 설정되어있는 시나리오로 작업 할 일이없는 한)은 측면 전투를해야합니다 있지만

나는 아직 IE에 대한 해결책을 발견하지 않았습니다 - 솔루션의 효과.

은 한마디로 http://result.dabblet.com/gist/3713284/

에서 자신에 대한 참조 : 바로 아이의 스타일에 display:table;을 추가합니다. 어떤 이유로 FF로 table, block, list-item 또는 table-caption 중 하나를 사용할 수 있지만 Safari/Chrome에서는 작동하지 않습니다.

: 블록 절대, 그것은 모두 크롬과 FF 작동합니다

<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

난 그냥 당신이 위치를 설정하면 것을 발견

그것은 아래의 코드를 사용

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

추악하지만 어떤 경우에는 도움이 될 수 있습니다.