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;等其他方法来隐藏元素是更好的选择。~~

Answer 2

您应该使用Bootstrap的sr-only替换.hide规则：

.hide {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Answer 3

添加相对于表单元素的位置和z-index：999然后就可以了。

我不能从我的表格中选择任何东西

3 个答案: