IE CSS Bug - كيف أحافظ على الموضع: مطلق عندما يتغير محتوى جافا سكريبت الديناميكي على الصفحة

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

سؤال

لدي صفحة بها عمود وقسم محتوى، إلى حد ما مثل هذا:

<div id="container">
    <div id="content">blahblahblah</div>
    <div id="column"> </div>
</div>

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

التصميم مشابه لهذا:

#column 
{
    width:150px;
    height:450px;
    left:-150px;
    bottom:-140px;
    background:url(../images/image.png) no-repeat;
    position:absolute;
    z-index:1;
}

#container 
{
   background:transparent url(../images/container.png) no-repeat scroll left bottom;
   position:relative;
   width:100px;
}

يعمل هذا بشكل رائع عندما يكون المحتوى موجودًا #content يتم تحميله ديناميكيًا قبل العرض.يعمل هذا أيضًا بشكل رائع في Firefox دائمًا.ومع ذلك، في IE6 وIE7 إذا استخدمت جافا سكريبت لتغيير المحتوى (وبالتالي الارتفاع). #content, ، لم تعد الصور مصطفة (#column لا يتحرك).إذا استخدمت IE Developer Bar لتحديث div فقط (على سبيل المثال، أضف الموضع: المطلق يدويًا)، فستقفز الصورة للأسفل وتصطف مرة أخرى.

هل هناك شيء أفتقده هنا؟

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

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

المحلول

إنه خطأ في محرك التقديم.أنا أواجهه طوال الوقت.إحدى الطرق المحتملة لحلها هي إخفاء القسم وإظهاره كلما قمت بتغيير المحتوى (وهذا بدوره يغير الارتفاع):

var divCol = document.getElementById('column');
divCol.style.display = 'none';
divCol.style.display = 'block';

نأمل أن يحدث هذا بسرعة كافية بحيث لا يكون ملحوظًا :)

نصائح أخرى

الحل البديل الآخر الذي نجح معي ولم يكن له أي تأثير وميض هو إضافة وإزالة اسم فئة CSS وهمي، مثل هذا باستخدام jQuery:

$(element).toggleClass('damn-you-ie')

إذا كنت قلقًا بشأن الحصول على وميض من إظهار وإخفاء Divcol ، فيمكنك Ajust خاصية CSS أخرى وسيكون لها نفس التأثير على سبيل المثال

var divCol = document.getElementById('column');
divCol.style.zoom = '1';
divCol.style.zoom = '';
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top