Css3媒体查询和引导程序正在Chrome上运行，但不适用于Fire Fox

Question

我的媒体查询在FireFox中无效。一切都在Chrome中完美运行。此外，引导类（hidden-xs等）也不能在FireFox上运行。我的其他媒体查询是：

（min-device-width：768px）和（max-device-width：1024px）和（-webkit-min-device-pixel-ratio：2）

（min-device-width：320px）和（max-device-width：480px）和（-webkit-min-device-pixel-ratio：2）

我是StackOverflow的新手，所以如果问题格式不正确，我会道歉。任何帮助将不胜感激，谢谢！

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

nav.navbar {
    width: 100%;
    background: #fff;
    border: none;
    padding: 0px;
    text-align: center;
    height: 200px;
}

 .navbar-right{
  width:100%;
  text-align: center;
  float: none;
  padding-right: 40px;
  padding-left: 40px;
}
.login-btn {
    color: #61a036;
    background-color: #fff;
    border: 2px solid #559b20;
    width: 100%;
    border-radius: 20px;
    font-size: 15px;
    float: none;
    text-align: center;
    margin-top: 100px;
}
a.navbar-brand img {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 0px;
    height: 120px;
    width: 100%;
    line-height: inherit;
    white-space: nowrap;
    text-align: center;
    float: none;
}

.navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
    margin: 0;
    padding: 20px;
}


h1 {
    text-align: center;
    color: #fff;
    font-weight: 600;
    float: none;
    padding: 20px 0px 0px 0px;
    margin: 0;
}

form {
    background-color: #eee;
    width: 100%;
    height: 500px;
    text-align: center;
    padding: 0px;
    border-radius: 0px;
    margin: 0;
}


h2 {
    text-align: center;
    color: #000;
    font-weight: 400;
    float: right;
    padding: 0;
    margin: 0;
    font-size: 18px;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
}


.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:first-child>.btn-group:not(:first-child)>.btn, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle {
    display: block;
    width: 100%;
    width: 220px;
    padding: 20px;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #000;
    border-radius: 20px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    margin-bottom: 5px;
    margin-top: 8px;
}

.form-control {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 12px;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #000;
    border-radius: 20px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}



p.terms-of-service-text {
    font-size: 10px;
    margin-top: 10px;
    margin-bottom: 0px;
}

.signup-btn {
    width: 350px;
    background: #ff6b36;
    color: #fff;
    border-radius: 15px;
    border: 2px solid #fff;
    padding: 8px;
    margin-top: 15px;
}

img.bbb-img{
  height: 40px;
  width: 100px;
  margin:10px;
}

.form-background{
    position: relative;
    min-height: 1px;
    padding-right: 0px;
    padding-left: 0px;
    background-color: #333;
    width: 100%;
}


.form-wrapper {
    width: 100%;
    text-align: center;
    padding: 0;
    margin:0;
    background:#eee;
}

.smiling-woman {
    height: 286px;
    width: 100%;
    margin: 0px;
}

/*-------Everyday Things Section Styles-------*/

    section#everydayThings{
  margin-top: 0px;
  background:#fff;
  width: 100%;
  padding:0;
}

.arrow-background {
    width: 100%;
    height:500px;
    background-image: url(../img/moneyArrowSmall.png);
    background-position: center;
    background-repeat: no-repeat;
}

ul.list-wrapper {
    width: 100%;
    padding: 0;
    margin: 0;
    margin-top: 150px;
    color: #61a036;
}

/*-------Members Section Styles-------*/

  section#members-section{
  margin-top: 50px;
  background:#eee;
  width: 100%;
  padding:0;
}

img.fc-number-img {
    width: 100%;
}

p.members-text{
  width: 100%;
  font-size: 15px;
}


/*-------Testimonial Section Styles---------*/

#testimonial-section {
    position: relative;
    width: 100%;
    margin-top: 10px;
    padding: 0;
}

#testimonial-section:before {
    content: "";
    height: 0px;
    flex: 0;
    background: transparent;
}



.testimonial-img{
  border:none;
  border-radius:50%; padding:10px;
  height:100%;
  width: 50px;
}

#testimonial-section blockquote {
    margin: 0;
    margin-top:-12px;
    background: #fff;
    border: none;
    position: relative;
    color: #61a036;
    font-size: 20px;
    font-family: sans-serif;
    padding: 5px;
    width: 100%;
    background-image: linear-gradient(#61a036, #61a036), linear-gradient(#61a036, #61a036), linear-gradient(#61a036, #61a036), linear-gradient(#61a036, #61a036), linear-gradient(white, white);
    background-repeat: no-repeat;
    background-size: 4px 90%, 30% 4px, 4px 90%, 90% 4px, calc(100% - 8px) calc(100% - 8px);
    background-position: left bottom, left bottom, right top, right top, 4px 4px;
}


#testimonial-section blockquote:before, #testimonial-section blockquote:after {
    text-align: center;
    background: transparent;
    position: absolute;
}

#testimonial-section blockquote:before {
    content: url(../img/quotes.png);
    left: -1.5rem;
    top: -40px;
    padding-bottom: -40px;
}

#testimonial-section blockquote:after {
    content: url(../img/quotesAfter.png);
    bottom: 0px;
    right: 15px;
    height: 40px;
    width: 40px;
}

.blockquote-text {
    padding: 1em;
    font-size: 15px;
}

cite {
    font-size: 10px;
    position: relative;
    top: -5px;
    background: white;
    float: right;
    padding-right: 55px;
}

img.testimonial-img{
  height: 200px;
  width: 200px;
  margin:0;

}

h4.footer-heading {
    font-size: 30px;
    color: #fff;
    letter-spacing: 2px;
}

#footer-section {
    background-color: #61a036;
    height: 300px;
    margin-bottom: 0;
    margin-top: 99px;
    color: #fff;
    width: 100%;
}

p.terms {
    font-size: 11px;
    display: inline;
    font-family: 'Roboto-Bold' , sans-serif;
}

}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/custom.css">

  <title>Fusion Cash</title>
</head>

<body>
  <nav class="navbar navbar-default">
    <a class="navbar-brand pull-left"><img src="./img/fc_logo_title_green.png"></a>
    <div class="nav navbar-right">
      <button type="button" class="btn btn-primary login-btn">LOGIN TO EXISTING ACCOUNT</button>
    </div>
  </nav>

  <header>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
          <h1>Get Paid<br><span class="header-span">CA$H</span></h1>
          <img class="smiling-woman" src="./img/womanSmiling.png" alt="smiling woman">
        </div>
        <div class="col-md-6 form-background">
          <div class="form-wrapper">
            <form class=" form" method="post" action="#">
              <h2 class="text-center">Join FusionCash for <span class="form-span">Free</span></h2>
              <div class="form-group centerBlock">
                <div class="cols-sm-10">
                  <div class="input-group">
                    <div id="input_container">
                      <input type="text" class="form-control" name="name" id="name" placeholder="      | Enter your Name" />
                      <img class="input-at-img" src="./img/user.png" alt="input-image">
                    </div>
                  </div>
                </div>
              </div>

              <div class="form-group centerBlock">
                <div class="cols-sm-10">
                  <div class="input-group">
                    <div class="input_container">
                      <input type="text" class="form-control" name="name" id="name" placeholder="      | Email Address" />
                      <img class="input-at-img" src="./img/at.png" alt="input-image">
                    </div>
                  </div>
                </div>
              </div>

              <div class="form-group centerBlock">
                <div class="cols-sm-10">
                  <div class="input-group">
                    <div class="input_container">
                      <input type="text" class="form-control" name="name" id="password1" placeholder="      | Password" />
                      <img class="input-at-img" src="./img/lock.png" alt="input-image">

                    </div>
                  </div>
                </div>
              </div>

              <div class="form-group centerBlock">
                <div class="cols-sm-10 text-center">
                  <div class="input-group">
                    <div class="input_container">
                      <input type="text" class="form-control" name="name" id="password2" placeholder="      | Confirm Password" />
                      <img class="input-at-img" src="./img/lock.png" alt="input-image">

                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group centerBlock">
                <div class="cols-sm-10">
                  <div class="input-group">
                    <div class="input_container">
                      <input type="text" class="form-control" name="name" id="maps" placeholder="      | Zip Code" />
                      <img class="input-at-img" src="./img/maps.png" alt="input-image">

                    </div>
                  </div>
                </div>
              </div>

              <div class="form-group centerBlock">
                <button class="btn btn-primary signup-btn">Sign Up Now</button>
              </div>

              <div class="form-group text-center">
                <p class="terms-of-service-text">By registering, you agree to the<br><u>Terms of Service</u> and <u>Privacy Policy</u>.</p>
                <img class=" bbb-img" src="./img/bbb1.png" alt="bbb-img">
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </header>

  <section id="everydayThings">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h3 class="text-center">Make money doing the <span class="things-span">EVERDAY THINGS </span><br class="hidden-lg hidden-md hidden-sm hidden-xl">you already do.</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="things-list-wrapper text-center">
            <ul class="things-list">
              <li clas="things-item">
                <img class="img-responsive icon-img" src="./img/survey.png" alt="">
                <p class="icon-text">Complete<br>Surveys</p>
              </li>
              <li clas="things-item">
                <img class="img-responsive icon-img" src="./img/computer.png" alt="">
                <p class="icon-text watch-videos-icon-text">Watch<br>Videos</p>
              </li>
              <li clas="things-item">
                <img class="img-responsive icon-img" src="./img/appreciation.png" alt="">
                <p class="icon-text paid-to-click-icon-text">Paid<br>To CLick</p>
              </li>
              <li class="things-item ">
                <img class="img-responsive icon-img" src="./img/savings.png" alt="">
                <p class="icon-text">Daily Cash<br>Email</p>
              </li>
              <li class="things-item ">
                <img class="img-responsive icon-img" src="./img/target.png" alt="">
                <p class="icon-text">Play<br>Games</p>
              </li>
              <li class="things-item ">
                <img class="img-responsive icon-img" src="./img/list.png" alt="">
                <p class="icon-text">Complete<br>Tasks</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="container">
      <div class="row text-center arrow-background">
        <div class="col-md-6">
          <div class="centerBlock card-wrapper">
            <div class="card">
              <div class="card-header">Participate</div>
              <div class="card-body">
                <ul class="participate">
                  <li class="participate-list">No Credit Card Needed</li>
                  <li class="participate-list">No Fees to Get Paid</li>
                  <li class="participate-list">$5 Bonus for Signing Up</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="centerBlock">
            <ul class="list-wrapper">
              <li class="money-item"><img class="item" src="./img/check icon.png" alt="check icon"><span class="item-list">Mailed Check via USPS</span></li><br>
              <li class="money-item"><img class="item" src="./img/deposite.png" alt="check icon"><span class="item-list">Direct Deposit to Bank Account</span></li><br>
              <li class="money-item"><img class="item" src="./img/paypal.png" alt="check icon"><span class="item-list">Deposit to Verified PayPal®</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!--Members Section-->
  <section id="members-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <div class="centerBlock">
            <div class="members-paragraph-wrapper">
              <p class="members-text">
                We’ve paid our members over</p>

              <img class=" fc-number-img" src="./img/FC-Number.png" alt="FC-Number Image">

              <p class="members-text">
                ...and counting!</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!--Testimonial Section-->
  <section id="testimonial-section" class="hidden-sm hidden-xs">
    <blockquote>
      <p class="blockquote-text">My son had to go to the doctor’s office and my insurance didn’t pay for some of it, and rent was due ... then I looked at the calendar...I was going to be getting a big payment from FusionCash in only 3 more days, straight to my PayPal® account!</p>
      <cite>- John Hughes of Grants Pass, OR</cite>
    </blockquote><br class="hidden-sm hidden-xs">

    <img class="testimonial-img" src="http://res.cloudinary.com/alexscloud1234/image/upload/c_scale,w_200/v1516656363/ryan-fields-328391_lxjslk.png">
  </section>

  <!--Testimonial Section-->
  <section id="testimonial-section" class=" hidden-lg hidden-xl">
    <div class="container">
      <div class="row>">
        <div class="col-md-6 centerBlock">
          <img class="testimonial-img2 " src="./img/ryanfieldsSmall.png">
        </div>
        <div class=col-md-6>
          <blockquote class="blockquote-small">
            <p class="blockquote-text">My son had to go to the doctor’s office and my insurance didn’t pay for some of it, and rent was due ... then I looked at the calendar...I was going to be getting a big payment from FusionCash in only 3 more days, straight to my PayPal® account!</p>
            <cite>- John Hughes of Grants Pass, OR</cite>
          </blockquote>
        </div>
      </div>
    </div>
  </section>



  <section id="footer-section" class=" hidden-xs">
    <div class="container">
      <div class="row">
        <div class="col-md-12 text-center footer-top-wrapper">
          <h4 class="footer-heading">No catch, just cash.</h4>
          <button class="btn btn-primary btn-footer">SIGN UP NOW</button>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4 text-center">
          <p class="terms">Terms of Service | Privacy Policy</p>
        </div>
        <div class="col-sm-4 text-center">
          <p class="terms">2005 - 2017 FusionCash, Inc.<br>All rights reserved.</p>
        </div>
        <div class="col-sm-4 text-center">
          <p class="terms">Affiliates | Publishers | Corporate</p>
        </div>
      </div>
    </div>
    <!--container-->
  </section>

  <section id="footer-section" class="hidden-sm hidden-md hidden-lg hidden-xl">
    <div class="container">
      <div class="row ">
        <div class="col-sm-12 text-center footer-top-wrapper">
          <h4 class="footer-heading">No catch, just cash.</h4>
          <button class="btn btn-primary btn-footer">SIGN UP NOW</button>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 text-center">
          <p class="terms">Terms of Service | Privacy Policy</p><span>
              <p class="terms">Affiliates | Publishers | Corporate</p></span>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="text-center">
            <p class="terms">2005 - 2017 FusionCash, Inc.<br>All rights reserved.</p>
          </div>
        </div>
      </div>
    </div>
    <!--container-->
  </section>
</body>

</html>

Answer 1

-webkit-min-device-pixel-ratio

Vendor prefixes是：

• 非标
• 实验
• 不适合生产使用
• 特定供应商

Firefox不使用Webkit渲染引擎。它不支持-webkit-min-device-pixel-ratio。