css - How do I make a dropdown in Firefox look the same as Chrome/IE? -


so, i'm building website dropdown menu. in chrome looks nice, on firefox takes no padding , find way make them same on both browsers.

i'm aware known issue, didn't find decent fix problem.

here's drawing dropdown

enter image description here

code on debug

<div class="collapse navbar-collapse" id="mainmenu_nav">    <ul class="navbar-nav nav h>       <li aria-haspopup="true" class="hasitems hover focus">          <div class="wrapper" tabindex="-1">               ....           </div>       </li>      </ul>    </div> 

css

.navbar-collapse{    max-height:none;    margin-left:-10px;    margin-right:-10px; }  .h{     position:relative;     back-ground-color:black;     margin-left:5px;     white-space:nowrap;     width:100%;     display:table; }  .h>li.hover{      background-color:white;      top:3px } .h>li{    position:relative;    white-space:nowrap;    display:table-cell;    float:none;    vertical-align:middle } 

what's trick apply here?

funny thing, guessed problem might not had anythingto dropdown, fact firefox somehow ignored padding. seems wrong, since according this answer, bug of chrome , not firefox

i've fixed problem displaying li block

@-moz-document url-prefix(){      .h >li.hover{          height:45px;          display:block;          top:3px;      } } 

Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -