html - IE8 中选择按钮的奇怪显示

Question

所以这发生在我的选择框上:

请注意没有滚动条，它一直打开到 IE8 中的窗口标题。这不会发生在 Webkit 或 FF 上。

HTML:

     <div class="fblock">
            <label>Municipios</label><br />
            <select name="municipality" id="municipality" class="selector">
                <!-- todo: fill with municipalities-->

                    <option value="Aguada">Aguada</option>

                    <option value="Aguas Buenas">Aguas Buenas</option>

                    <option value="Arecibo">Arecibo</option>

                    <option value="Bayamón">Bayamón</option>

                    <option value="Cabo Rojo">Cabo Rojo</option>

                    <option value="Caguas">Caguas</option>

                    <option value="Canóvanas">Canóvanas</option>

                    <option value="Carolina">Carolina</option>

                    <option value="Cayey">Cayey</option>

                    <option value="Cidra">Cidra</option>

                    <option value="Dorado">Dorado</option>

                    <option value="Fajardo">Fajardo</option>

                    <option value="Guayama">Guayama</option>

                    <option value="Guaynabo">Guaynabo</option>

                    <option value="Gurabo">Gurabo</option>

                    <option value="Hatillo">Hatillo</option>

                    <option value="Humacao">Humacao</option>

                    <option value="Manatí">Manatí</option>

                    <option value="Mayagüez">Mayagüez</option>

                    <option value="Ponce">Ponce</option>

                    <option value="San Juan - Condado">San Juan - Condado</option>

                    <option value="San Juan - Hato Rey">San Juan - Hato Rey</option>

                    <option value="San Juan - Río Piedras">San Juan - Río Piedras</option>

                    <option value="San Juan - Santurce">San Juan - Santurce</option>

                    <option value="San Juan - Viejo San Juan">San Juan - Viejo San Juan</option>

                    <option value="San Sebastián">San Sebastián</option>

                    <option value="Toa Alta">Toa Alta</option>

                    <option value="Trujillo Alto">Trujillo Alto</option>

                    <option value="Yauco">Yauco</option>

            </select>
        </div>

CSS:

select.selector {padding:2px 5px;
    border:1px solid #56AB4E; -moz-border-radius:.2em; -webkit-border-radius:.2em; border-radius:.2em;}
select.selector:focus {
    box-shadow:0 0 5px #77BE5E; -moz-box-shadow:0 0 5px #77BE5E; -webkit-box-shadow:0 0 5px #77BE5E;}
div.fblock {display:inline-block; float:left; padding:0px 10px 10px 0px}
div.fblock.button {margin-top:10px}
div.fblock-container {clear:both; float:none; display:block; width:100%}

知道发生了什么事吗？我见过几个处理 IE7 上的修整问题的例子，但显然不是这样。 IE8 中的兼容模式也没有修复它。

我确定这是我忽略的一些 CSS 属性，但我很难过。

Answer 1

将此添加到您的css，可能有助于解决问题:

.selector{
    height:100px;
    overflow:scroll;
}