Question

我有一个下拉菜单，我使用CSS和一个名为Selectbox的Jquery插件设置了样式。 http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/

一切都运行良好，在Firefox，Chrome和Safari中看起来很完美。但出于某种原因，当我单击Internet Explorer中的下拉框时，下拉列表一直向右浮动，而不是直接在下拉列表下方浮动。我只编了3个月，所以这可能是一个非常愚蠢的错误，但我似乎无法弄明白。任何帮助将不胜感激。

这是HTML：

<div class="foldersoption">
      <select name="Items" id="Items">
              <option value="option1">My Items</option>
              <option value="option2">Shoes</option>
              <option value="option3">Birthday Ideas</option>
      </select>
 </div>

这是CSS：

.foldersoption{
   float: left;
   margin-left: 25px;
}


div.selectbox-wrapper ul li {
   border: 1px solid #FFFFFF;
   cursor: pointer;
   display: block;
   font-size: 12px;
   list-style-type: none;
   padding: 5px;
   text-align: left;
   width: 243px;
}

.selectbox {
   cursor: pointer;
   display: block;
   float: left;
   font-size: 15px;
   height: 25px;
   padding-left: 5px;
   text-align: left;
   width: 250px;
 }

你能帮帮忙吗？

Answer 1

根据需要相对于foldersoption元素和其他元素应用缩放和位置。例如：

.foldersoption { zoom：1; 位置：相对; }

这将迫使IE像其他浏览器一样对待它。 IE不能很好地处理浮动 - 你必须给它一些额外的配置＆amp;限制，以使其正常工作。

编辑：基于屏幕截图，IE正在抱怨安全问题 - 它是否有可能阻止某些脚本加载？尝试禁用或降低IE中的安全性，看看菜单是否会丢失。

编辑＃2：实际上你使用的插件很旧，似乎没有经过充分测试或维护。我能建议一个替代方案吗？

http://plugins.jquery.com/project/jQuerySelectBox

您可以在此处查看示例：http://labs.abeautifulsite.net/projects/js/jquery/selectBox/

我在IE7中测试了它似乎工作正常。设置起来非常简单，要更改外观，您只需要更改或覆盖默认的CSS样式。

下拉菜单的Internet Explorer布局问题

1 个答案: