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错误

回答

相关问题