javascript - 使自定义下拉列表跨浏览器工作

Question

所以我尝试设计一个自定义下拉菜单。幸运的是，我的下拉菜单在所有浏览器中看起来都不错。

除了，我的箭头似乎不喜欢在 chrome 和 firefox 中停留在同一个地方。

我可能正在做一些非常规的事情导致了这个问题，但我看不出它是什么。

这是一个jsfiddle这显示了我的烦恼。如果有人能提供帮助，那就太棒了。

<div id="zoomReport">
<span class="pointer" style="font-family:arial;font-size:11px;font-weight:bold;color:#333333;" data-dropdown="#zoomDropdown">
    <span class="fade" id="zoomPercent">80%</span>
    <div class="fade" id="dropdown"></div>
</span>

<div id="zoomDropdown" class="dropdown">
    <ul class="dropdown-menu">
        <li><a href="#">50%</a></li>
        <li><a href="#">60%</a></li>
        <li><a href="#">70%</a></li>
        <li><a href="#">80%</a></li>
        <li><a href="#">90%</a></li>
        <li><a href="#">100%</a></li>
        <li class="dropdown-divider"></li>
        <li><a href="#">Fit</a></li>
    </ul>
</div>

CSS

#zoomReport { height:35px;line-height:33px;float:left;margin-left:15px;width:auto;color: #000;padding: 0 5px;border-left:1px solid #d9d9d9;border-right:1px solid #d9d9d9; }

#zoomMe { position:absolute; margin-left:-450px; left:50%;}


.pointer { cursor:pointer;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

/* Add shadow and light bg change to dropdown on hover */
.pointer:hover #zoomPercent { padding:5px 10px; border:1px solid #d9d9d9; background-color:#f7f7f7; border-top-left-radius:2px; border-bottom-left-radius:2px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);box-shadow: 0 1px 1px rgba(0, 0, 0, .1) }
.pointer:hover #dropdown { background-color:#f7f7f7;border:1px solid #d9d9d9;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);box-shadow: 0 1px 1px rgba(0, 0, 0, .1) }

/* Add inset shadow to dropdown on click */
.pointer:active #zoomPercent { -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); background: #f8f8f8; }
.pointer:active #dropdown { -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); background-color: #f8f8f8; }

#zoomPercent.active { border:1px solid #d9d9d9;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); background: #f8f8f8; }
#dropdown.active { border:1px solid #d9d9d9;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); background-color: #f8f8f8; }

.pointer:hover #zoomPercent.active { border:1px solid #d9d9d9;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); background: #f8f8f8; }
.pointer:hover #dropdown.active { border:1px solid #d9d9d9;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); background-color: #f8f8f8; }

#zoomPercent { padding:5px 10px; border:1px solid transparent; }

 #dropdown
 {
    float:right;
     border:1px solid transparent;
     border-top-right-radius:2px;
     border-bottom-right-radius:2px;
     width:15px;
     height:24px;
     margin-left:-2px;
     margin-top:5px;
     padding:0 5px 0 5px;
     background-image:url('http://i.imgur.com/3Bp09GB.png');
     background-position:center;
     background-size:10px 10px;
     background-repeat: no-repeat;
}

Answer 1

float 被弄乱了，你设置的行高似乎将显示的百分比向下移动了。

http://jsfiddle.net/25E6w/4/

您希望两个并排元素具有相同的 float :

#zoomPercent {
    float:left;

#dropdown {
    float:left;