title: CSS with JQueryUI autocomplete across browsers
body: <p>I'm fairly inexperienced with CSS across Browsers, so apologies if this is simple or obvious.</p>
  
  <p>I have a Leaflet map with a JQueryUI Autocomplete/Combobox search functionality.  Everything is working just fine.  I have it looking as I want it in Chrome.</p>
  
  <p>If I take a look at the combobox in Safari or Firefox it's off by a pixel or so (the button on the side is either one or two pixels above or below the input box).  And as you can see in the screen shots, it doesn't look good at all.  Below is the CSS code and screen shots.</p>
  
  <p>My question is: what CSS properties should I be playing with to get the combobox aligned across browsers?  Is there a website that will describe the cross-browser inconsistencies so I can be aware of them?</p>
  
  <p><strong>Current CSS related to Combobox:</strong></p>
  
  <pre><code>.custom-combobox {
      position: relative;
      display: inline-block;
      margin: 2px;
  }
  
  .custom-combobox-toggle {
      position: absolute;
      top: -1px;
      bottom: 0;
      margin-left: -1px;
      padding: 0;
      /* support: IE7 */
      *height: 1.7em;
      *top: 0.1em;
  }
  
  .custom-combobox-input {
      margin: 0;
      padding: 0.3em;
      width: 140px;
  }
  
  .custom-combobox .ui-button-text {
      height: 14px;
  }
  </code></pre>
  
  <p><strong>Chrome Version (looks good):</strong></p>
  
  <p><img src="https://i.stack.imgur.com/FrYC3.png" alt="Chrome Version that looks good"></p>
  
  <p><strong>Firefox Version (looks off):</strong></p>
  
  <p><img src="https://i.stack.imgur.com/js4im.png" alt="enter image description here"></p>
  
  <p><strong>Safari Version (also off):</strong></p>
  
  <p><img src="https://i.stack.imgur.com/LzHpE.png" alt="enter image description here"></p>