Mozilla FireFox懸停的工作方式與Chrome不同

Question

我有自定義下拉菜單。 大多數情況下，所有工作都是使用CSS完成的。 通過添加刪除ui-dropdown-expanded類可以打開/關閉此下拉ui-dropdown-expanded

這是我的全部代碼

 $(document).on('click', '#ResponseFilter', function() { $(this).find('ul').toggleClass('ui-dropdown-expanded'); }); 

 .reviews-filter.ui-dropdown { background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat-x: ; background-repeat-y: ; background-size: auto; border-bottom-color: rgb(210, 210, 210); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(210, 210, 210); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(210, 210, 210); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(210, 210, 210); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: rgb(42, 100, 150); cursor: pointer; display: block; float: left; font-family: "Proxima Nova"; font-size: 14px; font-stretch: normal; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-weight: normal; height: 30px; line-height: 20px; margin-bottom: 7px; margin-left: 0px; margin-right: 10px; margin-top: 7px; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px; position: relative; text-size-adjust: 100%; vertical-align: baseline; width: 200px; word-break: keep-all; word-wrap: break-word; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ui-dropdown:hover { cursor: pointer; } .ui-dropdown { background: #2D72A7; color: #fff; padding: 6px 10px; margin: 7px 10px 7px 0; border: 1px solid #2D72A7; border-radius: 3px; position: relative; font-size: 14px; } .fl { float: left !important; } .fr { padding-top: 0; float: right !important; } .reviews-filter.ui-dropdown ul.ui-dropdown-expanded { margin-top: -1px; } .reviews-filter.ui-dropdown ul.ui-dropdown-expanded li, .reviews-filter.ui-dropdown ul.ui-dropdown-expanded { background: #fff; border: 0; color: #2a6496; } .ui-dropdown:hover ul.ui-dropdown-expanded { display: block; background: #1a4d74; color: #fff; position: absolute; left: -1px; right: -1px; top: 31px; border: 1px solid #113958; text-align: center; box-shadow: 0 2px rgba(0, 0, 0, 0.15); } .ui-dropdown ul { display: none; z-index: 2; } .reviews-filter.ui-dropdown ul.ui-dropdown-expanded li { border-left: 1px solid #D2D2D2; border-right: 1px solid #D2D2D2; } .reviews-filter.ui-dropdown ul.ui-dropdown-expanded li, .reviews-filter.ui-dropdown ul.ui-dropdown-expanded { background: #fff; border: 0; color: #2a6496; } .ui-dropdown:hover ul.ui-dropdown-expanded li { border-bottom: 1px solid #113958; } .reviews-filter.ui-dropdown ul.ui-dropdown-expanded li label { color: #2a6496; text-align: left; display: block; padding: 0 10px; line-height: 22px; text-transform: none; font-size: 14px; } .ui-dropdown:hover ul.ui-dropdown-expanded li label { padding-top: 10px; padding-bottom: 10px; color: #000; margin: 0; cursor: pointer; } .ui-dropdown ul li label { font-weight: normal; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ResponseFilter" class="ui-dropdown fl reviews-filter" style="width: 200px;"> <div class="fl"> <span id="response-filter-selected-value">All Responses Types</span> </div> <div class="fr" data-filter="response"> <i class="fa fa-caret-down"></i> <ul class="ui-dropdown-expanded"> <li> <label for="response-filter-allresponsetypes">All Responses Types</label> </li> <li> <label for="response-filter-postedresponses">Posted Responses</label> </li> <li> <label for="response-filter-responserequired">Response Required</label> </li> </ul> </div> </div> 

在代碼段中，它與jsFiddle中的代碼有所不同（不知道為什么導致代碼相同）

所以問題-在FF中，尤其是下拉按鈕和下拉列表之間有一些空格，使下拉菜單關閉，導致用戶迷失:hover:

在圖像上，有一些指針，用戶可以在其中看到下拉列表，而不能看到...

是因為頁邊距，填充或其他原因導致此問題？ 謝謝。

Answer 1

嗯，問題是因為有1px的margin 。

移動下拉列表時增加-1px; 到現有的利潤，以類ui-dropdown-expanded解決了我的問題。

 $(document).on('click', '#ResponseFilter', function() { $(this).find('ul').toggleClass('ui-dropdown-expanded'); }); 

 .reviews-filter.ui-dropdown { background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat-x: ; background-repeat-y: ; background-size: auto; border-bottom-color: rgb(210, 210, 210); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(210, 210, 210); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(210, 210, 210); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(210, 210, 210); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: rgb(42, 100, 150); cursor: pointer; display: block; float: left; font-family: "Proxima Nova"; font-size: 14px; font-stretch: normal; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-variant-numeric: normal; font-weight: normal; height: 30px; line-height: 20px; margin-bottom: 7px; margin-left: 0px; margin-right: 10px; margin-top: 7px; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; padding-top: 6px; position: relative; text-size-adjust: 100%; vertical-align: baseline; width: 200px; word-break: keep-all; word-wrap: break-word; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ui-dropdown:hover { cursor: pointer; } .ui-dropdown { background: #2D72A7; color: #fff; padding: 6px 10px; margin: 7px 10px 7px 0; border: 1px solid #2D72A7; border-radius: 3px; position: relative; font-size: 14px; } .fl { float: left !important; } .fr { padding-top: 0; float: right !important; } .reviews-filter.ui-dropdown ul.ui-dropdown-expanded { margin-top: -1px; } .reviews-filter.ui-dropdown ul.ui-dropdown-expanded li, .reviews-filter.ui-dropdown ul.ui-dropdown-expanded { background: #fff; border: 0; color: #2a6496; } .ui-dropdown:hover ul.ui-dropdown-expanded { display: block; background: #1a4d74; color: #fff; position: absolute; left: -1px; right: -1px; top: 31px; border: 1px solid #113958; text-align: center; box-shadow: 0 2px rgba(0, 0, 0, 0.15); } .ui-dropdown ul { display: none; z-index: 2; } .reviews-filter.ui-dropdown ul.ui-dropdown-expanded li { border-left: 1px solid #D2D2D2; border-right: 1px solid #D2D2D2; } .reviews-filter.ui-dropdown ul.ui-dropdown-expanded li, .reviews-filter.ui-dropdown ul.ui-dropdown-expanded { background: #fff; border: 0; color: #2a6496; } .ui-dropdown:hover ul.ui-dropdown-expanded li { border-bottom: 1px solid #113958; } .reviews-filter.ui-dropdown ul.ui-dropdown-expanded li label { color: #2a6496; text-align: left; display: block; padding: 0 10px; line-height: 22px; text-transform: none; font-size: 14px; } .ui-dropdown:hover ul.ui-dropdown-expanded li label { padding-top: 10px; padding-bottom: 10px; color: #000; margin: 0; cursor: pointer; } .ui-dropdown ul li label { font-weight: normal; } .reviews-filter.ui-dropdown ul.ui-dropdown-expanded { margin-top: -2px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ResponseFilter" class="ui-dropdown fl reviews-filter" style="width: 200px;"> <div class="fl"> <span id="response-filter-selected-value">All Responses Types</span> </div> <div class="fr" data-filter="response"> <i class="fa fa-caret-down"></i> <ul class="ui-dropdown-expanded"> <li> <label for="response-filter-allresponsetypes">All Responses Types</label> </li> <li> <label for="response-filter-postedresponses">Posted Responses</label> </li> <li> <label for="response-filter-responserequired">Response Required</label> </li> </ul> </div> </div>