html - 我无法从我的表格中选择任何内容

Question

我目前正在试验表单，现在我遇到了一个问题，我无法在表单上选择任何内容(输入、选项和复选框)，我不知道为什么，我无法确定问题所在，下面的代码工作正常在 Firefox 中，但它在 Chrome 上不起作用，这是什么问题？我错过了什么吗？

CSS，

body {
    font: 90%/1 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;}

form {
    width: 40em;}

legend {
    font-weight: bold;}

fieldset {
    margin: 1em 0;
    padding: 1em;
    border: 1px solid #ccc;
    background: #f5f5f5;}

label {
    width: 10em;
    float: left;
    clear: left;}

div {
    margin: 1em 0;} 

.short {
    width: 3em;}

.hide {
    width: 0;
    text-indent: -9999999999em;}

/* Favorite Color Fieldset Styles */

#favcolor {
    margin: 1em 0 0 0;
    padding: 0;
    border: none;}

h2 {
    margin: 0;
    padding: 0;
    width: 10em;
    float: left;
    font-weight: normal;
    font-size: 1em;}

.col {
    margin: 0;
    width: 8em;
    float: left;}

.col div {
    margin: 0;
    padding-bottom: 0.4em;}

.col label {
    float: none;}

和标记，

<form action="#" method="get">
 <fieldset>
 <legend>Personal Information</legend>
 <div>
 <label>Place of Birth</label>
  <select>
   <option value="america">America</option>
   <option value="philippines">Philippines</option>
   <option value="japan">Japan</option>
  </select>
 </div>
 <div>
 <label>Date of Birth</label>
 <label class="hide">Month of Birth</label>
 <label class="hide">Year of Birth</label>
 <input type="text" class="short" />
 <select>
  <option>January</option>
  <option>February</option>
  <option>March</option>
 </select>
 <input type="text" class="short" />
 </div>
  <fieldset id="favcolor">
   <h2>Favorite Color</h2>
   <div class="col">
    <div>
     <label><input type="checkbox" name="red" value="red" />Red</label>
    </div>

    <div>
     <label><input type="checkbox" name="orange" value="orang" />Orange</label>
    </div>

    <div>
     <label><input type="checkbox" name="yellow" value="yellow" />Yellow</label>
    </div>

    <div>
     <label><input type="checkbox" name="green" value="green" />Green</label>
    </div>
   </div>
   <div class="col">
    <div>
     <label><input type="checkbox" name="blue" value="blue" />Blue</label>
    </div>

    <div>
     <label><input type="checkbox" name="indigo" value="indigo" />Indigo</label>
    </div>

    <div>
     <label><input type="checkbox" name="violet" value="violet" />Violet</label>
    </div>

    <div>
     <label><input type="checkbox" name="pink" value="pink" />Pink</label>
    </div>
   </div>
  </fieldset>
 </fieldset>
</form>

感谢任何帮助，谢谢。

Answer 1

问题是这样引起的:

.hide {
    width: 0;
    text-indent: -9999999999em;
}

替换为:

.hide {
    width: 0;
    text-indent: -9999em;
}

它应该可以正常工作。 (Example)

但是，通过将元素移动到屏幕外的位置来隐藏元素并不是最佳做法。最好使用其他方法，例如 visibility: hidden; 或 display: none; 来隐藏元素。