تسطير SuperScript في IE

Question

سأكون مختصراً لأنني أقصر في الوقت المحدد ، لذلك أعتذر إذا لم يكن هذا مفصلاً كما أرغب في أن يكون.

لدي بعض الكود:

print("<a href='#'>Some text<sup>&reg;</sup> some more text</a>");

في FF ، يعمل هذا كما أريد ، يتم التأكيد على الرابط ككل. ومع ذلك ، في IE ، يتم التأكيد على الرابط إلا تحت ® حيث يبدو رمزًا فوق الواصلة وهو يبدو مثيرًا للسخرية.

لقد جربت العديد من الاقتراحات التي وجدتها على Google ، لكن أيا منها لا مفيد للغاية في تحقيق التأثير المطلوب. إضافة الحدود إلى القاع ليست خيارًا للأسف. حتى الآن ، فإن الحل الأفضل هو كسر التسطير تمامًا إلى علامة SUP مع CSS والتي لا تزال تتركها تعمل بشكل جيد في FF بينما لا تزال تبدو أقل سخيفة في IE.

إذا كان بإمكان أي شخص المساعدة في ذلك ، فسيكون موضع تقدير كبير ، فأنا أفضل أن لا أتجاوز الموقع <sup> العلامات كما قيل لي أنه سيتعين علي فعل ذلك إذا لم أحل هذه المعضلة.

تحديث: ذهب مع حل SUP {"Text-Decoration: None"} ، سيفعل ذلك الآن. هناك علامات Reg في كل مكان ، لذلك كان يجب تحديث الموقع بأكمله ، وهو ما كان أكثر مشكلة مما كان يستحقنا جميعًا. بفضل أولئك الذين أجاب.

Answer 1

ال <sup> العلامة ليست رائعة لأشياء مثل الرموز التجارية وريج.

أفضل القيام بذلك مع CSS:

<span style='font-size:75%;vertical-align:super;text-decoration:none'>&reg</span>

إذا كنت تستطيع إعداد فئة .reg:

.reg {
    font-size:75%;
    vertical-align:super;
    text-decoration:none
}

إلى عن على:

<span class='reg'>&reg;</span>

Answer 2

في بعض الأحيان لا يُسمح لك بإضافة فصل إلى رابط أو لفه بأي عنصر. الوضع ليس نادرًا جدًا عندما تحتاج إلى العمل مع رمز الطرف الثالث. راجع للشغل ، نفس المشكلة مع العنصر أيضا.

في هذه الحالة ، يمكنك استخدام شيء مثل هذا:

1. اترك التأكيد كما هو الحال مع Firefox (كل شيء على ما يرام)

2. استخدم مثل هذا التصميم للكروم (لديه نفس المشكلات مثل IE ، حتى أصعب):

   [style]
   a sup {
       text-decoration: none;
       display: inline-block; // without this previous property will not work
       border-bottom: 1px solid;
       line-height: 1.5em;    // this and following properties are used to shift
       margin-top: -1em;      // an element to make border aligned with underline
                          // can be used relative position or something else.
   }
   a sub {
       text-decoration: none;
       display: inline-block;
       vertical-align: middle;
       border-bottom: 1px solid;
       line-height: 0.7em;
   }
   [/style]
   [a href="what-aczone-can-do-for-you.aspx"]Text-Jj_Jj[sub]Jj[/sub][sup]Jj[/sup]moreText[/a]
   

   • آسف على [] في العلامات ، ما زلت لا أستطيع التخلص من كيفية قيام نظام F *** بعمل عينات رمز - عندما أحاول التنسيق كما تريد ، أحصل على فوضى.

Answer 3

حسنًا ، إنه ليس حلاً أنيقًا ، واستخدم بشكل أساسي الحدود بدلاً من التسطير. سيكون عليك ترميز لونه بناءً

<style type="text/css">
   a.u {
       text-decoration: none; 
       border-bottom: 1px solid black;
       display: inline;
   }
</style>

<a href="#123" class="u">CHEESE<sup>&reg;</sup></a>

إريك

Answer 4

لقد جعلتها تعمل هكذا

print(< a href='#' class="underline">Some text< sup >&reg;< /sup > some more text< /a >)  
.underline {text-decoration:none; border-bottom:1px solid #FFF;}

Answer 5

حل إريك هو الأقرب. لا يحتاج display: inline حيث <a> العناصر هي عناصر مضمنة. الشيء الوحيد الذي يفتقده هو line-height حتى تتمكن من رؤية القاع الحدودي على IE 6 ، و IE 7. وإلا ، فلن ترى الخط.

<style type="text/css">
   a.u {
       text-decoration: none; 
       border-bottom: 1px solid black;
       line-height: 1.5em;
   }
</style>

<a href="#123" class="u">CHEESE<sup>&reg;</sup></a>

Answer 6

حسنًا ، أوافق على أنه يبدو فظيعًا ، لكن يبدو أنه هو الطريقة التي تجمع بها IE بين السطحي و SuperScript. أقترح عليك الذهاب مع خطة CSS الخاصة بك لإزالة السطحية a sup إذا كنت لا تستطيع الغش مع الحدود. هناك خاصية IE فقط تسمى text-underline-position لكن ليس لها أي قيمة تساعد هنا إما أخشى.

لصالح أي شخص لا يعرف ذلك بالفعل سيكون:

a sup{text-decoration:none;}

Answer 7

كما يقول Diodeus ، والقليل من البحث يميل إلى الاتفاق ، وأنا أفهم أن علامة Reg لن تدخل عنصر SUP على أي حال.

لذا ، على افتراض أننا نتعامل فقط مع قضية SUP/SUPNLINE وننسى أننا نشير إلى REG MARK ، فإن الحلول الوحيدة التي أعرفها لجعلها "تبدو" نفس الشيء هي صنعها vertical-align: baseline أو اقتل text-decoration على SUP.

Answer 8

سيضع حل القاع الحدودي الخط تحت أي "p" "Q" أو "y" بدلاً من الساقين السفلية للأحرف. هذا هو 2 بكسل أقل من التأكيد سيكون.

البديل هو جعل u003Ca>الموقف: قريبu003C/a>
اجعل u003Csup>الموقف: مطلق ؛ أعلى: -3px ؛ تدمير النص: لا شيء ؛u003C/sup>

أضف بعد ذلك