css - html attributes list




إنترنيت إكسبلورر ": تم تحديد+التصنيف: قبل عدم تقديم التصميم (2)

أواجه بعض المشاكل في الحصول على :checked التصميم :checked لمربعات الاختيار المخصصة لي لعرضه في إنترنيت إكسبلورر.

أنها تعمل بشكل جيد تماما في كروم.

... ولكن في إي

وهنا التصميم ذات الصلة

input[type="radio"], input[type="checkbox"] {
    opacity: 1;
    position: absolute;
    top: -9999;

    & + label {
        vertical-align: middle;
    }
}

input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
    content: '\f3fd';
    font-family: 'Ionicons';
    width: 26px;
    height: 20px;
    border: 2px solid #45555F;
    font-size: 24px;
    color: transparent;
    display: table-cell;
    text-align: center;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    padding: 0 2px;
}

input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
    content: '\f383';
    font-family: 'Ionicons';
    font-size: 24px;
    width: 26px;
    height: 20px;
    text-align: center;
    display: table-cell;
    padding: 0 2px;
    border: 2px solid #45555F;
    color: #8ec549;
}

input[type="radio"] + label:before {
    border-radius: 50% !important;
}

لاحظت أيضا أن إنترنيت إكسبلورر ببساطة يزيل التصميم على الحمل ...

شكرا على اي مساعدة!

إديت: كوديبن ديمو (هذا العرض لا يعمل في إي إما)

http://codepen.io/anon/pen/rLJqyK


بدلا من تعديل :before عنصر الزائفة على فحص أنا ببساطة استخدام :after عنصر الزائفة للدولة النشطة ونفض الغبار بين العيوب لإخفاء وتبين لهم وفقا لذلك.

شكرا لأي شخص ساعد.


المشكلة التي تواجهها هي IE10 - IE11 علة IE10 - IE11 ، حيث هذين المتصفحين تميل إلى تجاهل تماما إعلان الخط في العناصر الزائفة مع display: table-cell . وهذا يعني أن الخصائص font font-size font-family ، color وغيرها سوف يكون كل ضرب.

للتحايل على هذا الخطأ ، سيكون كافيا في قضيتك إلى:

▶ استخدام display: table-cell مع عنصر الفعلي بدلا من عنصر الزائفة، أو

▶ تغيير display: table-cell display: inline-block أو بعض قيمة أخرى non-table-cell لعنصر الزائفة الخاص بك.

▶ الإعلان عن خاصية float لها قيمة أخرى من none بحيث يتحول display: table-cell display: block .

في ما يلي بعض الأسئلة التي تواجه مشكلة في display: table-cell وكذلك التي قد تكون من أي مساعدة:

إي لا تلوين: قبل كما خلية الجدول، لماذا؟

تحديد موضع العرض داخل العرض: خلية الجدول في إي 10

عرض خلية الجدول على عنصر الزائفة في IE11







pseudo-element