IE下拉截止

Question

我正在修复与css的下拉截止问题。 它对我来说很好。我正在使用箭头进行下拉。 这种下拉在ie7和ie6中不可见。 我附上了一张图片。

我尝试并减少了滤镜可见的不透明度：对于ie7但使文字消失。我能解决吗？

需要帮助才能在ie7中看到它。

<style type="text/css">
.styled-select select {
   background: transparent;
   width: 100%;
    width: auto;
   padding: 5px;
   line-height: 1;
   border: 0px none transparent;
   border-radius: 0;
   outline:0;
   height: 30px;
   -webkit-appearance: none;
   position:absolute;
   top:-2px;
   left:-1px;
   }
   .styled-select {
   width: 155px;
   height: 25px;
   overflow: hidden;
   background-image: url("dropdown-arrow.gif");
   background-repeat: no-repeat;
   background-position:top right;
   background-color:#fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0px 1px 2px #ccc;
-webkit-box-shadow: inset 0px 1px 2px #ccc;
box-shadow: inset 0px 1px 2px #ccc;
   border: 1px solid #c3c3c3;
   position:relative;
   }

</style>
<div class="styled-select"> 
   <select>
      <option value="0">Please Select</option>
<option value="BILLING" >Default Billing</option>
<option  value="Auburn Office" >Auburn Office</option>
<option  value="Boston Office" >Boston Office</option>
<option  value="Central Ave Office" >Central Ave Office</option>
<option  value="Knoxville Office" >Knoxville Office</option>
<option  value="Seahawks HQ" >Seahawks HQ</option>
<option  value="Test Ship To Address Field Lenght with this line 1" >Test Ship To Address Field Lenght with this line 1</option>
<option  value="Zones" >Zones</option>
<option  value="test address" >test address</option>
</select>

</div>

请参阅： - http://jsfiddle.net/Pq2zH/embedd

Answer 1

我最近遇到过这个。显然，IE 7中存在一个错误，即SELECT列表保持无限的z-index。要解决此问题，您可能必须实现javascript来显示或隐藏下拉列表，但这是一个痛苦的解决方案。最好的是弃用旧浏览器的支持：）