لم يتم التعرف على DIV في FF + Opera ، يعمل في IE + Chrome

لقد جربت وحاولت جاهدا التغلب على هذه المشكلة في الأيام القليلة الماضية ، حيث أريد فقط أن أطلق هذا الموقع قبل كل شيء الآن. لقد قمت بتطوير هذا للأسبوع الأخير أو نحو ذلك وكنت أستخدم المتصفح المفضل لدي ، Google Chrome. نعم ، خطأ كبير!

على أي حال ، هنا هو الموقع التجريبي الذي يظهر ما أريده بالقرب من كل شيء لتبدو وكأنها (اعتذارات لبعض الأشياء التي في غير مكانها ، لم تنته بعد!): http://www.weburton.co.uk/content/demo/

ترى المجال الاجتماعي؟ يتم عرضها بشكل صحيح في Chrome ؛ تمامًا كما أريد في IE يعرض مناطق div ، ولكن هناك بعض مشكلات التصميم مثل النص على جانب Twitter.

ومع ذلك ، يتم تجاهل مناطق div بالكامل في المتصفحات الأخرى على ما يبدو ؛ انها مشكلة غريبة ، أنا أعترف بذلك. لدي لهم المغطى في div الذي لديه صورة خلفية (selenasocial) وبعد ذلك لديك العوامات الأخرى عائمة. هنا هو رمز (CSS):

#selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
    display: inherit;
width: 100%;
min-height: 263px;
z-index: 555;
border: none; 
    overflow:auto;}

.selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
    display: inherit;
width: 100%;
min-height: 263px;
    z-index: 255;
border: none; 
    overflow:auto;}

.selenasocial img {
border: none;}

.twitsocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}

.facesocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}

وهنا HTML ، أستخدم Widgets (ونعم ، لقد تم تصميمها بشكل صحيح في functions.php):

<!-- Selena Gomez Social Networks -->

<div class="selenasocial">


<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar") ) : ?> <?php   endif;?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar 2") ) : ?> <?php   endif;?>
</div>

لقد تغلبت على الخطأ في IE (كما كان يحدث هناك أيضًا) عن طريق نسخ CSS أعلاه إلى ملف IE.css منفصل. أنا لا أفهم لماذا لا يتفوق المتصفحان اللذان يتقدما بسرعة على IE من ملف CSS الرئيسي.

أي مساعدة سيكون مقدرا للغاية - لقد تم تمزيق شعري عن هذا في الأيام القليلة الماضية.

شكرا مقدما!

0

1 إجابة

هناك (من الناحية الفنية) لا شيء خاطئ مع شفرتك - الجزء الذي نشرته. أنت تقوم بضبط كل من الخواص العائمة إلى اليسار ، والتي أعتقد أنها ليست كما تريد ، ولكن هذا لم يفسر لماذا تم تجاهل الخصائص الأخرى.

لن أقرأ ملف CSS البالغ طوله 4700 سطر للعثور على ما هو الخطأ به ولكن سأحاول مساعدتك على القيام بذلك بنفسك.

أول شيء فعلته هو محاولة اصطياد رمز CSS الذي نشرته مع firebug ، ولدهشتي ، لم يكن هناك. السطر الأخير من Firefug CSS أعطاني 902 والذي كان:

    .clearfix {
        zoom: 1;
    }

في الواقع ، لم تظهر الحرائق أي شيء التكبير (كانت الأقواس فارغة). لذلك ذهبت إلى ملف CSS مباشرة للعثور عليه ، وبعد التساؤل عن سبب استخدام أي شخص لمثل هذه الخاصية غير القياسية ، تحققت من الأسطر التالية للعثور على قوسين بدلاً من قوس في السطر 907.

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

إن تقرير ما إذا كانت إمكانيات IE و Chrome في تفسير ملفات CSS خاطئة أمر جيد أو سيئ في الواقع لا يمكن مناقشته هنا ، ولكن تعلم كيفية العثور على الأخطاء وتصحيحها يمكن أن يساعدك في الحصول على أشياء تعمل مع المتصفحات الأكثر صرامة.

0
وأضاف
... حسنا ، أشعر وكأنه dumbass. شكرا جزيلا لمساعدتكم هناك. أنت حقا أنقذني كما كنت على وشك البدء في هذا الموضوع كله لعنة مرة أخرى. انت نجم. :-)
وأضاف المؤلف Steven, مصدر