在Chrome中輸入邊框但不在IE中

我正在創建一個web表單，並且我發現了一個奇怪的小錯誤或其他東西：雖然我添加到文本輸入字段的邊框和背景樣式適用於Chrome，我在IE8或9中什麼都沒得到。因爲沒有邊界或背景。看它，你甚至不知道輸入字段存在，除非你點擊標籤或設法點擊正確的地方，因爲焦點屬性工作得很好。在Chrome中輸入邊框但不在IE中

我見過幾個有相反問題的問題 - 邊界在IE中可用，但不適用於Chrome - 但不適用於此版本。我嘗試過邊框：默認，我試過非常黑暗的背景，我嘗試刪除我的CSS中的整個類，並且我的輸入字段在IE中仍然不可見，除非它們聚焦。

這裏是我的CSS的部分（離開了肯定不相關的部分）：

input[type='checkbox'] 
{ 
    width:1em; 
    float:left; 
    margin-left:1em; 
    margin-right:0.5em; 
    border:none; 
} 

.form 
{ 

    font-size:12px; 
    font-family:Georgia; 
    width:25em; 
    color:#000; 
} 

.form_large 
{ 

    background:#fff; 
    font-family:Georgia; 
    font-size:12px; 
    width:35em; 
    border:2px inset #ccccff 
} 

.form_medium { 

    font-size:12px; 
    font-family:Georgia; 
    width:20em; 
    color:#000; 
    margin-left:0.5em; 
    border:2px inset #ccccff; 
} 

.form_qty { 

    font-size:12px; 
    font-family:Georgia; 
    width:3em; 
    color:#000; 
    margin-left:0.5em; 
    border:2px inset #ccccff; 
} 

input[type='text'], input[type='tel'], input[type='email'] 
{ 

    color:#000033; 
    background:#FFF; 
    border:1px thin #99ccff; 
} 

input[type='checkbox'] 
{ 

    color:#cFF; 
} 

li input[checkbox], input[text] 
{ 

    left:-2; 
    margin-left:0; 
    opacity:0; 
    z-index:2; 
    cursor:pointer; 
    height:1em; 
    width:1em; 
    top:0; 
    border:1px solid #000033; 
}

這裏是（部分）相關的HTML（這是一個相當長型）：

<label for="input_1">Name/Company*</label> 
    <input type="text" name='name' id="input_1" placeholder='Full name or Company name' required='required' class='form_medium' /> 
</p> 
<p> 
    <label for="input_2">Address</label> 
    <input type="text" name='Address' id="input_2" class='form_medium' /> 
</p> 
<p> 
    <label for='input_3'>City*</label> 
    <input type='text' id='input_3' name='City' required='required' class='form_medium' /> 
</p> 
<p> 
    <label for='input_4'>Phone*</label> 
    <input type='tel' pattern="\d{10}" name='phone' placeholder='e.g.'id='input_4'class='form_medium' required='required' /> 
</p> 
    <p> 
    <label for="input_5">E-mail</label> 
    <input type="email" name='email' placeholder='e.g. [email protected]'id="input_5" class='form_medium' /> 
</p> 
<p><p3>Please select all that apply:</p3></p> 
<ol> 
    <li class='main'> 
    <input name='questions' type='checkbox' id='checkbox_1'label="label" for='checkbox_1' /> 
    Questions:** 
    <ol> 
     <li class='sub_1'> 
     <input name='Questions' type='text' class='form_large' cols="60" rows="5" placeholder='Do you have any questions about your equipment or our services?' id='input_6' /> 
     </li> 
    </ol> 
    </li> 
</ol> 
<ol> 
    <li class='main'> 
    <input name='Visit' type='checkbox' checked id='checkbox_2'label="label" for='checkbox_2' /> 
    Visit (select type, all that apply): 
    <ol> 
     <li class='sub_1'> 
     <input name='Service' type='checkbox' id="checkbox_3" label="label" for='checkbox_3' /> 
     Service 
     <ol> 
      <li class='sub_2'> 
      <input name='Change Filters' type='checkbox' id='checkbox_4' /> 
      Change filters 
       <ol> 
        <li class='sub_3'> 
         <input name='Salt' type='checkbox' id='salt_del' /> 
      Deliver Salt 
      <input type="text" name='del_salt' id='del_salt' class='form_qty' /> 
      </li> 
      </ol> 
      </li> 
      <li class='sub_2'> 
      <input name='Repair' type='checkbox' id='checkbox_5' /> 
      Repair</li> 
      <li class='sub_2'> 
      <input name='Move' type='checkbox' id='checkbox_6' /> 
      Move Equipment</li> 
      <li class='sub_2'> 
      <input name='Hook_Up' type='checkbox' id='checkbox_7' /> 
      Hook up Equipment</li> 
      <li class='sub_2'> 
      <input name='Disconnect' type='checkbox' id='checkbox_8' /> 
      Disconnect Equipment</li> 
     </ol> 
     </li> 
     <li class='sub_1'> 
     <input name='Delivery' type='checkbox' id="checkbox_9" label="label" for='checkbox_9'/> 
     Delivery (specify quantity) 
     <ol> 
      <li class='sub_2'> 
      <input name='Water' type='checkbox' id='checkbox_10' /> 
      Water (5-gal bottled) 
      <input type="text" name='del_wat' id='del_wat' class='form_qty' /> 
      </li> 
      <li class='sub_2'> 
      <input name='Salt' type='checkbox' id='checkbox_11' /> 
      <label class='qty' for='del_salt'>Salt</label> 
      <input type="text" name='del_salt' id='del_salt' class='form_qty' /> 
      <ol> 
        <li class='sub_3'> 
         <input name='Salt' type='checkbox' id='filt_change' /> 
      Change Filters 
      </li> 
      </ol> 
      </li> 
      <li class='sub_2'> 
      <input name='Filt_deliver' type='checkbox' id='checkbox_12' /> 
      <label class='qty' for='del_filt'>Filters</label> 
      <input type="text" name='del_filt' id='del_filt' class='form_qty' /> 
      </li> 
      <li class='sub_2'> 
      <input name='Parts' type='checkbox' id='checkbox_13' /> 
      <label class='qty' for='del_parts'>Parts</label> 
      <input type="text" name='del_parts' id='del_parts' class='form_qty' /> 
      </li> 
      <li class='sub_2'> 
      <input name='Other_deliver' type='checkbox' id='checkbox_14' /> 
      Other (please specify)** 
      <input type="text" name='del_other' id='del_other' class='form_medium' /> 
      </li> 
     </ol> 
     </li> 
     <li class='sub_1'> 
     <input name='Other_visit' type='checkbox' id="checkbox_15" label="label" for='checkbox_15'/> 
     Other Visit (please specify)** 
     <input type="text" name='visit_other' id='visit_other' class='form_medium' /> 
     </li> 
    </ol> 
    </li> 
</ol> 
<ol>

提前致謝！

來源

2012-01-06 Erin Halbmaier

您能否創建一個重現此問題的示例，並且不需要通過代碼牆讀取？ http://sscce.org/ – jprofitt 2012-01-06 16:48:33

http://jsfiddle.net/bX8Cb/1 – Dallas 2012-01-06 16:55:11