لماذا تغير تخطيط في IE عندما UL وحده في TD مقابل وجود DIV فارغة إضافية؟

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

سؤال

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

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

إليك حالتي الاختبار: 

<!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><title>
    Strange gap
</title>
   <style type ="text/css" >
/* stolen from http://unraveled.com/publications/css_tabs/, then hacked to death */

ul.tabnav { /* general settings */
border-bottom: 1px solid #cbcbcd; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */
margin: 3px 0px 0px 0px; /* Right on top of the next row */
}

ul.tabnav li { /* do not change */
display: inline;
}

ul.tabnav li.current { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
/* border: solid 1px red; */
}

ul.tabnav li.current a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}

ul.tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #cbcbcd; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #cbcbcd; /* set unselected tab background color as desired */
color: #666; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
}

/* end css tabs */
    </style>         
    </head>
    <body>

            <table>
                <tr>
                    <td>
                    I'm making some tab navigation with css. I copied the code 
                    from <a href=" http://unraveled.com/publications/css_tabs/"> http://unraveled.com/publications/css_tabs/</a>,
                    and hacked it up. There's an odd behavior that I see on IE (v 7).
                    There's a gap below.

                    </td>
                </tr>
                <tr>
                <td>
                        <ul class="tabnav">
                            <li class="current"><a >Home</a></li>
                            <li ><a >Search</a></li>
                        </ul>
                </td>
                </tr>
                <tr>
                    <td>

                    No gap below this

                    </td>
                </tr>
                <tr>
                <td  >
                <div style="width: 100%"><!-- This div forces the menu to render properly in IE7. I don't know why --></div>
                        <ul class="tabnav">
                            <li class="current"><a >Home</a></li>
                            <li ><a>Search</a></li>
                        </ul>
                </td>
                </tr>
                <tr>
                    <td>

                    why? The difference is the presence of a div with style="width: 100%" on it in the second 
                    case. I don't know why this fixes the rendering; I'd like a better way to do it without adding an 
                    extra empty div. This page should be in standards mode (or at least non-quirks mode).

                    </td>
                </tr>
            </table>

            For comparison, it works fine outside of a table:

                        <ul class="tabnav">
                            <li class="current"><a >Home</a></li>
                            <li ><a >Search</a></li>
                        </ul>

    </body>
</html>

ولقد crossposted الآن هذا بلدي بلوق: <لأ href = "http://www.bacondrivencoding.com/2008/2009/07/why-does-layout-change-in-ie-when-ul- هو وحده-في-TD / "يختلط =" نوفولو noreferrer "> بيكون الترميز مدفوعة: لماذا تغير تخطيط في IE عندما UL وحده في TD مقابل وجود DIV فارغة إضافية ، مع لقطة؟ لذلك يمكن أن يرى الناس ما أتحدث عنه.

وهنا لقطة:

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

المحلول

وهو سبب الفجوة من خلال طرق IE مضحكة مع القوائم. منذ علامات ul يمكن أن تحتوي فقط <li>s، IE على ما يبدو يعتقد أيضا المسافات بين عناصر القائمة غير مناسبة ونقله داخل السابقة البند قائمة، في قضيتك بعد <a>.

وهذا يسبب ثم خلفية بيضاء من علامة التبويب المحددة لتتداخل <ul>s الحد السفلي (بسبب موقعها).

ويبدو أن أسهل طريقة لايجاد حل لها في هذا المثال هو ببساطة لإزالة لون الخلفية على ul.tabnav li.current. في الواقع، أعتقد أنك يمكن إزالة هذا مجموعة الأوامر بأكمله، لأن الحدود لا تفعل أي شيء سواء.

إذا لا شيء من ذلك يساعدك على إصلاحه على الموقع الفعلي، يمكن أن يكون الملاذ الأخير للتخلص من جميع المسافات خارج العلامات <li>. منها مثلا. 

<ul><li><a>Home</a></li><li>etc.</li></ul>

وأو شيئا من هذا القبيل إذا كنت ترغب في الاحتفاظ ببعض مظاهر التنسيق: 

   <ul><!--
   --><li><a>Home</a></li><!--
   --><li>etc.</li><!--
   --></ul>

ولكن هذا هو أيضا بيضاء كل ما هو المسؤول عن التباعد بين علامات التبويب، لذلك عليك أن إضافة الهامش الأيمن لاعادتها.

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