पारंपरिक रूप से प्राप्त पाठ सजावट शैली

Question

मैं कैसे नकारना या एक माता-पिता text-decoration शैली को दूर करेंगे? उदाहरण के लिए, पाठ और एंकर दोनों में लाइन-थ्रू का टेक्स्ट-सजावट है, क्या एंकर टैग पर लागू नहीं होने का कोई तरीका है?

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

नोट: अंतराल में भीतरी पाठ लपेटकर क्या मैं तो मैं एक समाधान सीएसएस शैलियों यदि संभव हो तो के आधार पर तलाश कर रहा हूँ है के साथ एक आसान विकल्प नहीं है।

Answer 1

मैं यह संभव है विश्वास नहीं है। SitePoint से:

इसके अलावा, पूरे बॉक्स के साथ गाया जाता है इनलाइन बक्से पर पाठ सजावट, भले ही यह वंशज बॉक्स शामिल हैं। यह भी विरासत के समान दिखाई दे सकता है। वंश बॉक्स पर कोई भी पाठ सजावट सेटिंग कभी नहीं "पूर्ववत करें" कर सकते हैं एक पूर्वज बॉक्स के पाठ सजावट।

Answer 2

स्वीकार किए जाते हैं जवाब में निम्न पंक्ति गलत है:

एक वंशज बॉक्स पर कोई भी पाठ सजावट सेटिंग "पूर्ववत करें" कभी नहीं कर सकते हैं एक पूर्वज बॉक्स के पाठ सजावट।

कभी कभी नहीं, सही कहा?

मुझे नहीं है, फिर भी IE के लिए एक समाधान मिल गया है, लेकिन यह अन्य ब्राउज़र के लिए संभव है (जब तक आप एक परिदृश्य में जहाँ स्ट्राइकथ्रू एक <TD> पर सेट किया गया है के साथ काम करने के लिए हो) यद्यपि आप पक्ष लड़ाई के लिए होगा समाधान के प्रभाव।

http://result.dabblet.com/gist/3713284/

संक्षेप में खुद के लिए देखें: सिर्फ बच्चे की शैली के लिए display:table; जोड़ें। एफएफ में किसी कारण से आप table, block, list-item या table-caption लेकिन इनमें से किसी का उपयोग सफारी/क्रोम में काम नहीं करते कर सकते हैं।

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

बदसूरत, लेकिन कुछ मामलों में मदद कर सकते हैं;