مؤشر تحديد النص في CSS IE7، سلوك غريب

StackOverflow https://stackoverflow.com/questions/1621132

  •  06-07-2019
  •  | 
  •  

سؤال

غريب هنا، آمل أن أحصل على بعض التعليقات لتوجيهي في الاتجاه الصحيح.

إذا كان لي #wrapper أو أن أيًا من عناصر div الفرعية لا يتم تطبيق لون خلفية عليها، أي 7 يغير مؤشر "المؤشر" العادي إلى مؤشر "تحديد النص" عند تحريك الماوس حول الصفحة (سواء كان تمرير الماوس فوق النص أم لا).

اعتقدت أنني أصلحت المشكلة منذ فترة، ولكن عندما أزيل لون الخلفية من جهازي #wrapper أو أي من divs الأطفال، تظهر المشكلة مرة أخرى.

فقط أبحث عن بعض التلميحات أو ما يجب أن أتحقق منه.

#wrapper {
    overflow: hidden;
    margin: 0 auto;
    width: 960px; /* using 960.gs */
}

#children {
    display: inline;
    float: left;
    margin: 0 10px;
    width: 940px;
}

يحرر:

يبدو أن السبب هو أن divs "hasLayout"، لكنني ما زلت غير متأكد من كيفية إصلاحه.يرى هذا الرابط.

تحرير 2:

لا يمكنني العثور على المزيد من المعلومات حول هذا "خطأ IE7". أي شخص لديه أي أفكار ، أو حتى إذا كنت على دراية بهذا الخطأ ويمكنني إخباري حتى أعلم أنني لست مجنونًا.أشعر بالإحباط حقًا من Microsoft مرة أخرى.لقد كلفني بالفعل بضع ساعات إضافية من العمل هذا الأسبوع.يبدو وكأنه لا ينتهي أبدا.

تحرير 3:

هنا رابط آخر لشخص لديه نفس المشكلة.

تحرير 4:

STACKOVERFLOW.com يعاني من هذا الخلل!كذلك يفعل mashable.com.أضمن أن العديد من مطوري الويب لديهم هذا الخطأ على مواقعهم وهم لا يعرفون ذلك حتى.

التحقق من ذلك لنفسك...قم بتمرير مؤشر الماوس حول صفحة أي من الموقعين.لاحظ أنه يتحول إلى مؤشر تحديد النص عندما لا ينبغي له ذلك.

يبدو أنه سيكون من السهل إصلاحه باستخدام cursor الخاصية، ولكن المشكلة ستكون في تشغيل سلوك مؤشر تحديد النص المناسب عند الحاجة.

هل كانت مفيدة؟

المحلول

هل من الاختراق أن نذكر صراحةً ما هو المؤشر الذي يجب أن يذهب إلى أين؟

html {
    cursor: default;
}

h1, h2, h3, h4, h5, h6,
p, li, label, td, th {
    cursor: text;
}

a:link, a:visited, a:hover, a:active {
    cursor: pointer;
}

إلخ..

نصائح أخرى

أنا متأكد تمامًا من أنني واجهت ذلك من قبل، ولكن ربما يكون الأمر دقيقًا جدًا بحيث لا يمكن ملاحظته أثناء بعض الاختبارات السطحية للمتصفح.ولكن من المؤكد أنني واجهت أيضًا مشكلات تم حلها عن طريق تعيين لون الخلفية.

بقدر ما أستطيع أن أقول، فإن أفضل طريقة لإصلاحها هي وضع العنصر الذي يسبب المشاكل، أو إضافة div مجمّع حوله.من المرجح أن تستخدم position: relative, ، رغم ذلك absolute و fixed يجب أن تعمل أيضا.

عادةً ما يعمل تحديد موضع العنصر نفسه، لكن إضافة div المجمّع قد يعمل بشكل أكثر اتساقًا.

على سبيل المثالإضافة position: relative إلى .post-text يقوم الفصل بإصلاح المؤشر على الأسئلة والأجوبة في هذه الصفحة.

يعمل ملف GIF الشفاف مقاس 1 × 1 بكسل وهو أيضًا حل ممتاز لملفات الصور هذا وغيرها من الأخطاء في IE 6 إلى 8.أود أن أضيف شيئًا كهذا إلى تعليقاتي الشرطية لجميع IE:

* {
    background: url('images/fix1.gif');
}

هل حاولت الإعداد background-color:transparent; صراحة؟هل هذا يساعد؟

قد يبدو هذا بمثابة اختراق قبيح، ولكن هل حاولت تعيين صورة GIF شفافة بحجم 1 × 1 بكسل (AKA spacer) كخلفية؟

هذا ليس مثاليًا، ولكن بالنسبة لهذا المثال الصغير يبدو أنه يعمل مع IE 7.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="overflow: hidden; margin: 0 auto; width: 140px;">
   <div style="position: relative; display: inline;">
      <p>
         Here is some test text that will wrap.
      </p>
   </div>
</div>
</body>
</html>

ليس لدي أي فكرة عن سبب نجاح هذا الأمر، وهو بالتأكيد ليس مثاليًا.لسبب ما، يؤدي وضع العنصر p في div المضمن في موضعه نسبيًا إلى جعل مؤشر الماوس يتصرف كما أتوقع.

لست متأكدًا من أن هذا يعمل بالمعنى الأوسع على الرغم من وجود تسلسل هرمي للعناصر.

أدرك أن هذه ليست إجابة مثالية، ولكنها قد تحفز أفكارًا أخرى.

حل دليلة، المبسط قليلاً فقط، يعمل بشكل رائع بالنسبة لي ويحل أيضًا مشكلة مركاتور.

div { cursor: default; }
div * { cursor: auto; }

المشكلة هي أنه يتعين عليك إنشاء ملف CSS آخر ومعالجته باستخدام التعليقات الشرطية حتى لا تعوق المتصفحات الأخرى.

ملاحظة:تصبح هذه المشكلة مزعجة للغاية مع مواقع الويب ذات الخلفية المظلمة.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top