Question

I am facing the problem in css for different browser.

当我更改＆＃34; combi_toggle_bar＆＃34;的CSS时顶级财产。如果它顶部：-48px那么它在Chrome浏览器上没有显示差距但Firefox浏览器出现问题。如果top：-52px那么它在Firefox浏览器上没有显示Gap但是chrome显示出差距。您还可以看到屏幕截图。

Give Me解决方案如何解决此问题。我附上截图两个浏览器。

＆＃13;

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

＆＃13;

  .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;
        }

＆＃13;

<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>

＆＃13;

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


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


  [1]: http://i.stack.imgur.com/EqqFb.png
  [2]: http://i.stack.imgur.com/nWYJ6.png

Answer 1

添加以下css，这将仅影响chrome

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

如何在css中为chrome或firefox

1 个答案: