IE7 والخاصية CSS الجدول الخلية

Question

وهكذا أنا أحب ذلك عندما تعمل طلبي كبير في فايرفوكس، ولكن بعد ذلك فتحه في IE و... كلا، يرجى المحاولة مرة أخرى.

وقضية أواجه هو أنني تعيين خاصية عرض CSS إما none أو table-cell مع جافا سكريبت.

وكنت في البداية باستخدام display: block، ولكن فايرفوكس وجعلها غريبة من دون الملكية table-cell.

وأنا أحب أن تفعل ذلك دون إضافة الإختراق في جافا سكريبت لاختبار IE. أي اقتراحات؟

وشكرا.

Answer 1

وهناك طريقة جيدة لحل هذا الإعداد قيمة display إلى '':

<script type="text/javascript">
<!--
function toggle( elemntId ) {
    if (document.getElementById( elemntId ).style.display != 'none') {
        document.getElementById( elemntId ).style.display = 'none';
    } else {
        document.getElementById( elemntId ).style.display = '';
    }
    return true;
}
//-->
</script>

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

Answer 2

ولقد حل هذه باستخدام مسج:

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tablecell").wrap("<td />");
    $(".tablerow").wrap("<tr />");
    $(".table").wrapInner("<table />");
  }
});

والبرنامج النصي أعلاه يفترض أن يكون لديك عناصر div باستخدام أسلوب مثل:

<style>
.table     { display: table; }
.tablerow  { display: table-row; }
.tablecell { display: table-cell; }
</style>

Answer 3

وكان لي نفس المشكلة وتستخدم

*float: left; 

و"*" يشير IE فقط

Answer 4

حسنا، IE7 لم يكن لديك display: table(-cell/-row) لذلك سوف يكون لمعرفة شيء آخر الخروج أو القيام متصفح تستهدف (التي أنا أتفق، هو سيء الإختراق). كحل سريع (أنا لا أعرف ما كنت تحاول تحقيق، ومظهر الحكيم) قد تتمكن من محاولة display: inline-block ونرى ما يبدو.

وربما يجدوا طريقة للقيام display: block وإيجاد حل لمشكلة "فايرفوكس جعلها غريبة" بدلا من ذلك؟ هل تستطيع أن تصف ما تعنيه التقديم غريب بالضبط؟

Answer 5

وأنت لا تحتاج إلى تفعيل جافا لاختبار IE، استخدم تعليقات مشروطة .

وكنت قد ننظر في حل هؤلاء الرجال خطرت للتعامل مع العرض يشبه الجدول في IE.

Answer 6

وعن طريق مضمنة كتلة يعمل بشكل جيد لهذا النوع من الاشياء. لا، IE 6 و IE 7 من الناحية الفنية لم يكن لديك عرض: مضمنة لبنة، ولكن يمكنك تكرار السلوك مع الأنماط التالية:

div.show-ib {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

والمفتاح لهذا هو "التكبير: 1 'تبديل ممتلكات' hasLayout" على العنصر الذي يغير الطريقة متصفح يجعل عنصر مستوى الكتلة. ومسكتك الوحيد مع كتلة مضمنة هو أنت لا يمكن أن يكون لها هامش من أقل من 4PX.

Answer 7

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

وأظن أن نهجا مختلفا من شأنه أن يحل مشكلتك بطريقة عبر متصفح جوهريا. يمكنك فتح سؤال منفصل ان يصف تأثير كنت تحاول تحقيق، ونشر HTML و CSS التي تعمل حاليا في فايرفوكس؟

Answer 8

وهناك مثال كود كرة التعليقات الشرطية التي eyelidlessness المستخدم، يرجى نشر

و"[إذا لتر IE 8]" يعمل فقط إذا كان المتصفح IE أقل من IE8 لIE8 يفعل ذلك الحق. مع التعليقات مشروطة IE7 يرتب عناصر div طيف أفقيا ... HTML:

 <div class="container">
    <!--[if lt IE 8 ]><table><tr><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="en.html">English</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div tabindex="0" class="thumb"><img src="pictures\pic.jpg" /></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="de.html">Deutsch</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]></tr></table><![endif]-->
</div> 

وبلدي CSS

.link {
 display:table-cell;
 vertical-align:middle;
 }
 div.container {
 margin: 0 auto;
 display:table;
 }
 .thumb {
 display:table-cell;
 float: left;
 text-align: center;
 }

وIE 8 و 9 العمل مع CSS كما يفعل فايرفوكس. IE7 يبدو الآن نفسه باستخدام الجدول والعلامات TD & TR. في بعض صفحات إنترنت إكسبلورر 8 يعمل 20٪ فقط من الوقت، لذلك كنت [إذا LT IE 9]

وهذا يساعد أيضا تذليل القضايا عمودي محاذاة أن IE7 لا يمكن التعامل معها.

Answer 9

وحاولت كل شيء والطريقة الوحيدة التي وجدت أن كان كل عبر متصفح جافا سكريبت لاستخدام / مسج. هذا هو الحل خفيفة الوزن نظيف: انقر هنا

Answer 10

وIE7 لا يدعم display:inline-block; سواء. وzoom: 1; *display: inline; على الإختراق واضح بعد المغلق للحصول على display:table-cell;