CSS أشكال التصميم - IE 6/7 علة

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

سؤال

وأنا تطوير موقع على شبكة الانترنت باستخدام نماذج واحد من المتصفحات استهدافهم للأسف IE 6 و 7. أواجه مشكلة مع CSS وتقديم IE من عناصر النموذج التي يتم نصب.

وكنت قد كتبت حالة اختبار، وأنه على هذا النحو (متوفر أيضا على الإنترنت على HTTP: / /xistence.osnn.net/testcases/ie67fieldset/ ): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>IE [6|7] Wha?</title>
    <style type="text/css">

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
    }

    /* remember to define focus styles! */
    :focus {
        outline: 0;
    }

    body {
        line-height: 1;
        color: black;
        background: white;
    }

    #req fieldset {
        border: 0;
        border-top: 1px solid #000;
        padding: 0em 1em 0em 1em;
    }

    #req legend + label {
        margin-top: 0.5em;
    }

    #req legend {
        font-size: 1.2em;
    }

    #req label {
        display: block;
        background: none;
    }

    #req input, #req textarea {
        position: relative;
        display: block;
        left: 200px;
        top: -1em;
        margin-bottom: -0.3em;
    }

    #req input[type="text"], #req textarea {
        width: 300px;
    }

    #req textarea {
        height: 3.6em;
    }

    #req input[type="text"], #req textarea {
        border: 1px solid #0a0;
    }

    #req label.required + input[type="text"], #req label.required + textarea {
        border: 1px solid #a00;
    }

    #req input[type="submit"] {
        position: relative;
        top: 0;
        margin: 0;
        left: 200px;
        margin-top: 0.5em;
    }

    #req input[type="hidden"] {
        display: none;
    }
    </style>
</head>
<body>
<form id="req">
    <fieldset>
        <legend>Contact Information</legend>
        <label for="name" class="required">Name: </label> <input type="text" id="name" name="name"></input>
        <label for="phone" class="required">Phone Number: </label> <input type="text" id="phone" name="phone"></input>
        <label for="email">Email: </label> <input type="text" id="email" name="email"></input>
    </fieldset>
    <fieldset>
        <legend>Personal Info</legend>
        <label for="sports">Sports:</label> <input type="text" id="sports" name="sports"></input>
        <label for="spentonline">Hours spent online: </label> <input type="text" id="spentonline" name="spentonline"></input>
        <label for="moreinfo">Tell us about yourself: </label> <textarea id="moreinfo" name="moreinfo"></textarea>
    </fieldset>
    <fieldset>
        <input type="submit" value="Submit" />
    </fieldset>
</form>
</body>
</html>

ولقد اتخذت أيضا اثنين من لقطات الشاشة، واحدة من IE 7 واحد من IE 8، IE 7 و IE 6 توافق على هذا التصميم لذلك أنا لم يكلفوا أنفسهم عناء أخذ لقطة شاشة من IE 6.

وIE [6 | 7]:

وIE 8:

وقد أي شخص ينظر إلى هذا الخطأ من قبل؟ اين ارتكبت خطأ؟ ما لا بد لي من إزالة والعمل على انجاحه في IE 6/7 دون الحاجة خطوط اضافية يمر صناديق مدخلات بلدي. تتم إزالة خطوط إضافية عند ذهابه في أعلى الحدود على مجموعة حقول، ولكن هذا ليس حلا لأن ذلك يزيل فصل المرئي كله.

فهي ثابتة. هامش القاع على جزء النص والمدخلات [نوع = "نص"] كان يسبب IE 6/7 أن يكون علة التقديم. إزالة تلك وكل شيء على ما يرام. اعتقد انني يمكن التعامل مع مساحة إضافية بين العناصر على الصفحة!

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

المحلول

وأرى أنك تستخدم 

input[type="submit"]

وأشك في هذا معتمد من قبل IE6 ... قد ترغب في وضع الطبقات في جميع المجالات لجعل الفرق بين أنواع مختلفة من المدخلات.

تعديل : ل

margin-bottom: -0.3em;

وأنت الآن تستخدم الهامش السلبي الذي غالبا ما يؤدي إلى مشاكل في IE وبالتالي يجب إزالة

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