我有一个问题，我不能得到相同的位，通过Firefox和Chrome渲染相同的CSS。而不是一个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中，选项不会内置显示。
解决方法
我不认为你应该(可以？)使< 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>
