自定義下拉工​​作跨瀏覽器

Question

所以我試着設計一個自定義下拉菜單。幸運的是，我的下拉菜單在所有瀏覽器中看起來不錯。

除了我的箭似乎不喜歡留在鉻和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

將浴液搞砸了，和你設置的line-height似乎向下移動顯示率。

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

你希望兩個並排側元素具有相同的浮動：

#zoomPercent { 
    float:left; 

#dropdown { 
    float:left;