Why does this form display incorrectly in IE7/8?
为什么IE7 / 8中此表单显示不正确？
- Firefox (correct): http://img812.imageshack.us/img812/9610/contactfirefox.png
- Firefox（正确）：http：//img812.imageshack.us/img812/9610/contactfirefox.png
- IE (incorrect): http://img840.imageshack.us/img840/2742/contactiexplorer.png
- IE（不正确）：http：//img840.imageshack.us/img840/2742/contactiexplorer.png
Here is the code:
这是代码：
/*-----Contact Form----------------*/
.fb-container {
width: 425px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif !important;
}
.fb-signuptxt {
margin-bottom: 5px;
color: #68a64c;
font-size: 18px;
font-weight: bold;
}
.fb-tptxt {
margin-bottom: 10px;
color: #006600;
font-size: 15px;
}
.fb-form {
padding: 10px 0 10px 0;
border-top: solid #a0a9c0 1px;
border-bottom: solid #a0a9c0 1px;
overflow: hidden;
}
.fb-input {
padding: 6px;
margin-top: 2px;
font-size: 16px;
width: 250px;
border: solid #bdc7d8 1px;
}
.fb-select {
padding: 5px;
margin-top: 2px;
height: 34px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 13px;
border: solid #bdc7d8 1px;
float: left;
}
.fb-txt-left {
width: 120px;
padding: 8px 0 8px 0;
margin: 2px;
text-align: right;
color: #1d2a5b;
font-size: 13px;
float: left;
}
.fb-input-right {
width: 250px;
float: left;
}
.fb-button-left {
margin: 8px 0 0 125px;
float: left;
}
.fb-error {
width: 366px;
background: #FFFFCC;
background-image:url(../images/error_warning_icon.svg.med.gif);
background-repeat: no-repeat;
background-position: 10px 5px;
border: 1px solid #dd3c10;
line-height: 15px;
margin: 10px 0 0 0;
padding: 7px 3px 7px 3px;
text-align: center;
float: left;
display: none;
}
/*Button*/
.button_outside_border_green {
width: 105px;
border: solid #3b6e22 1px;
border-bottom: solid #2c5115 1px;
cursor: pointer;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 13px;
font-weight: bold;
}
.button_inside_border_green {
padding: 6px 0 6px 0;
background-color: #68a64c;
border-top: solid #98c286 1px;
text-align: center;
color: #ffffff;
}
div.button_inside_border_green:active {
background-color: #609946;
}
#boxSuccess {
width:300px;
height: 40px;
background-color:#8DBCF5;
background-image:url(../check-blue-icon.gif);
background-repeat: no-repeat;
background-position: 5px 5px;
border:1px solid;
border-color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
color: white;
font-weight:bold;
padding: 16px 0 0 76px;
}
contact html code
联系HTML代码
<div id="contactheading">
<div id="contactheadingTxt">Please use this form to contact us for General enquries. If you need<br />support
please use the Support option in the menu. Thank you.</div></div><br />
<div class="fb-container">
<div class="done" style=display:none;></div>
<div class="fb-signuptxt">Contact Us </div>
<div class="fb-tptxt">Contact us with a general enquiry. </div>
<div class="fb-form">
<div class="fb-txt-left">First Name:</div>
<div class="fb-input-right">
<input type="text" class="fb-input" name="firstname"
id="firstname"/>
</div>
<div class="fb-txt-left">Last Name:</div>
<div class="fb-input-right">
<input type="text" class="fb-input" name="lastname"
id="lastname"/>
</div>
<div class="fb-txt-left">Your Email:</div>
<div class="fb-input-right">
<input type="text" class="fb-input" name="email" id="email"/>
</div>
<div class="fb-txt-left">Re-enter Email:</div>
<div class="fb-input-right">
<input type="text" class="fb-input" name="emailr" id="emailr"/>
</div>
<div class="fb-txt-left">New Password:</div>
<div class="fb-input-right">
<input type="password" class="fb-input" name="pass" id="pass"/>
</div>
<div class="fb-txt-left">I am:</div>
<div class="fb-input-right">
<select class="fb-select" name="sex" id="sex">
<option value="0">Select Sex:</option>
<option value="1">Female</option>
<option value="2">Male</option>
</select>
</div>
<div class="fb-txt-left">Birthday:</div>
<div class="fb-input-right">
<select class="fb-select" name="birthday_month" id="birthday_month">
<option value="0">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select class="fb-select" name="birthday_day" id="birthday_day">
<option value="0">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select class="fb-select" name="birthday_year" id="birthday_year">
<option value="0">Year:</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
</select>
</div>
<div class="fb-button-left">
<div class="button_outside_border_green" id="sub">
<div class="button_inside_border_green">
Send
</div>
</div>
</div>
1 个解决方案
#1
0
Can you be more specific?
你可以说得更详细点吗？
One thing that stands out is any floated element you have that has a horizontal margin, it's likely the double margin bug is occurring so put display:inline; on any element that is floated and has horizontal ( left, right ) margins.
有一点突出的是你拥有的任何具有水平边距的浮动元素，很可能发生双边距错误，所以放置显示：内联;在任何浮动的元素上具有水平（左，右）边距。
#1
0
Can you be more specific?
你可以说得更详细点吗？
One thing that stands out is any floated element you have that has a horizontal margin, it's likely the double margin bug is occurring so put display:inline; on any element that is floated and has horizontal ( left, right ) margins.
有一点突出的是你拥有的任何具有水平边距的浮动元素，很可能发生双边距错误，所以放置显示：内联;在任何浮动的元素上具有水平（左，右）边距。