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]:enter image description here

IE 8:

enter image description here

이전에 이 버그를 본 사람이 있나요?내가 어디서 잘못됐나요?입력 상자를 통과하는 추가 줄 없이 IE 6/7에서 작동하도록 하려면 무엇을 제거해야 합니까?필드 세트에서 테두리 상단이 사라지면 추가 선이 제거되지만 그렇게 하면 전체 시각적 분리가 제거되므로 이는 해결책이 아닙니다.

고정되어 있습니다.텍스트 영역 및 input[type="text"]의 margin-bottom으로 인해 IE 6/7에 렌더링 버그가 발생했습니다.그것들을 제거하면 모두 잘됩니다.페이지의 요소 사이에 추가 공간이 있으면 처리할 수 있을 것 같아요!

도움이 되었습니까?

해결책

사용하는 걸 보니 

input[type="submit"]

IE6에서 지원되는지 의심스럽습니다.다양한 입력 유형을 구분하기 위해 모든 필드에 클래스를 배치할 수 있습니다.

편집하다: 

margin-bottom: -0.3em;

현재 IE에서 종종 문제를 일으키는 음수 여백을 사용하고 있으므로 제거해야 합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top