CSS樣式表單 - IE 6/7錯誤

我正在開發一個使用表單的網站，其中一個瀏覽器的目標是不幸的是IE 6和7.我遇到了CSS和IE渲染表單元素的風格問題。CSS樣式表單 - IE 6/7錯誤

我已經寫一個測試用例，並且它是作爲這樣的（在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

有沒有人見過這個bug？我哪裏做錯了？我必須刪除什麼才能使其在IE 6/7中工作，而無需通過輸入框輸入額外的行。當邊框頂部在場集上消失時，額外的線條被移除，但這不是解決方案，因爲這樣做會消除整個視覺分離。

它是固定的。 textarea上的margin-bottom和input [type =「text」]導致IE 6/7出現渲染錯誤。刪除這些，一切都很好。我想我可以處理頁面元素之間的額外空間！

來源

2009-05-06 X-Istence

我看你用

input[type="submit"]

我懷疑這是由IE6的支持......你可能想要把類在所有的領域，使不同類型的輸入之間的差異。

編輯：

margin-bottom: -0.3em;

您正在用，往往導致在IE瀏覽器的問題，因此應

是不需要

來源

2009-05-06 18:17:03 marcgg

，我使用院長愛德華茲出色的IE7-JS去除切緣陰性項目將IE [6 | 7]固定到IE 8級別，但是這並沒有解決在接下來的幾個元素中顯示邊框的字段集問題。 – 2009-05-06 18:20:00

CSS樣式表單 - IE 6/7錯誤

回答

相關問題