javascript - 如何在 chrome 或 firefox 的 css 中定义 top 属性

Question

I am facing the problem in css for different browser. 

当我更改顶部属性“combi_toggle_bar”的 CSS 时。如果顶部:-48px，则在 Chrome 浏览器上显示没有间隙，但在 Firefox 浏览器中出现问题。如果 top:-52px 那么它在 Firefox 浏览器上没有显示间隙，但 chrome 则显示间隙。您还可以查看屏幕截图。

给我解决方案如何解决此问题。我已附上两个浏览器的屏幕截图。

   <script>
        $(document).ready(function(){
            $(".combi_search_btn").click(function(){
                $(".search-grid").toggle();
            });
        });
        </script>

  .combi_toggle_bar{
          display: block;
            float: right;
            position: absolute;
            z-index: 100;
            right:0px;
            top:-52px;
            -webkit-margin-top: -48px !important; /* for mozilla */
            -moz-margin-top: -52px !important; /* for mozilla */
            z-index: :9999;
            display: inline-block;
        }
    
        .combi_search_btn{
          border: none;
          float: right;
          background:#F1F1F2;
          border-radius:14px 14px 0 0;
          border:2px solid #BABABA;
          border-bottom:0px;
          padding:15px;
          color:#0A79AD;
          font-size:14px;
          font-weight:700;
          cursor:pointer;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="combi_toggle_bar">
    <button class="combi_search_btn">SEARCH FOR A PRODUCT +</button>
    </div>

Please See IT.[![Firefox Screenshot][1]][1]


[![Chrome Screenshot][2]][2]


  [1]: /image/EqqFb.png
  [2]: /image/nWYJ6.png

Answer 1

添加以下 css，仅对 chrome 有效

@media screen and (-webkit-min-device-pixel-ratio:0) { 
.combi_toggle_bar{
            top:-42px !important;
}
}