Question

我遇到了一个问题，我无法获得相同的CSS来在Firefox和Chrome上呈现相同的内容。而不是一个包含24个值的垂直选择框，它们在Firefox中都显示为彼此相邻的一行：

在Chrome中，它们显示为垂直多选框。

缩写3小时示例的完整代码：

<html>
  <head>
    <style type="text/css">
      option { display: inline; }
    </style>
  </head>
  <body>
    <form>
      <select id="aryHours[]" class="select_hours" size="1" multiple="multiple" name="aryHours[]">  
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </form>
  </body>
</html>

在Chrome中，选项不显示为内联。

有关此代码执行/不起作用的任何解释，是否有其他方法可以实现相同的布局？

Answer 1

我认为你不应该（可以？）将<option>元素内联成这样的内容。请尝试使用复选框。像this这样的东西：

<!DOCTYPE html>
<html>
 <head>
     <title>Inline Options</title>
     <style>
         ul {
             list-style:none;overflow:hidden;
         }
         ul li {
             lit-style:none;
             float:left;
             position:relative;
         }
         ul li input[type="checkbox"] {
             position:absolute;
             top:0;
             right:0;
             bottom:0;
             left:0;
             width:100%;
             height:100%;
             opacity:0;
         }
         ul li input:checked + label {
             background:blue;
         }
     </style>
 </head>
 <body>
     <form action="#" method="get">
         <ul>
             <li>
                 <input type="checkbox" name="aryHours[]" id="checkbox1" />
                 <label for="checkbox1" class="">Option 1</label>
             </li>
             <li>
                 <input type="checkbox" name="aryHours[]" id="checkbox2" />
                 <label for="checkbox2" class="">Option 2</label>
             </li>
             <li>
                 <input type="checkbox" name="aryHours[]" id="checkbox3" />
                 <label for="checkbox3" class="">Option 3</label>
             </li>
         </ul>
     </form>
 </body>
</html>

Answer 2

Firefox行为可能是由于一个错误

https://bugzilla.mozilla.org/show_bug.cgi?id=1271482

如前所述，尽量避免在选项

上使用内联

Chrome会出现<select> <option>标签的显示内联</option> </select>

2 个答案: