0

Alguém me sabe dizer porque ao mudar de browser, do Chrome para o Firefox, as posições relativas que eu dei no CSS mudam? Normalmente eu uso o Chrome, mas experimentei no Firefox e todos os objetos em que dei position:relative estão desflorestados.

/* ---------------------------------------------- */


/* RESULTADO PESQUISA ARTISTA */


/* ---------------------------------------------- */


/*container da pesquisa*/

.div-pesquisa {
  position: absolute;
  z-index: 50000;
  top: 120.8%;
}


/*estilização do titulo "you searched for...*/

.div-pesquisa h3 {
  text-align: center;
  text-transform: uppercase;
  font-size: 100%;
  font-weight: 300;
  letter-spacing: 1px;
}


/*container da pesquisa*/

.pesquisa {
  list-style: none;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-top: 1%;
  top: -80%;
}

.pesquisa li {
  display: block;
  float: left;
  width: 20%;
  height: 240px;
}


/*imagem da musica do artista */

.music-img {
  width: 100%;
  height: 240px;
  margin: 0;
  overflow: hidden;
  background-color: #666666;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.music-img:hover {
  background-color: #478B8D;
}


/* ===== */

.pesquisa li figure i {
  position: relative;
  top: 55px;
  left: 40%;
  font-size: 400%;
  color: #74C8D2;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.pesquisa li figure i:hover {
  color: #fff;
}


/* --------- IMPORTANTE --------*/


/*info da musica (ANIMAR E FAZER COM QUE AO FAZER HOVER NA MUSICA APAREÇA*/

.info-music {
  margin: 0 auto;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.46)));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
  width: 100%;
  height: 100px;
  padding: 0;
  top: 22%;
  position: relative;
  z-index: 1000;
}

.info-music h6 {
  margin: 0 10px;
  color: #000;
  text-align: center;
  font-size: 80%;
  position: relative;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 300;
  top: 25%;
  z-index: 1000;
}


/*----------------Container dos botoes--------------------*/

.result-info {
  position: relative;
  list-style: none;
  display: inline-block;
  width: 100%;
  z-index: 1;
}

.result-info li {
  display: block;
  float: left;
  width: 33.33%;
  z-index: 1;
}

.result-info .btn-playlists {
  width: 100%;
  height: 240px;
  margin-top: -1%;
  color: #fff;
  border: 0;
  background-color: #67AEB4;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

.result-info .btn-playlists:hover {
  background-color: #fff;
  color: #67AEB4;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

.result-info .btn-albums {
  width: 100%;
  height: 240px;
  margin-top: -1%;
  color: #fff;
  border: 0;
  background-color: #54A5AC;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

.result-info .btn-albums:hover {
  background-color: #fff;
  color: #54A5AC;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

.result-info .btn-bio {
  width: 100%;
  height: 240px;
  margin-top: -1%;
  color: #fff;
  border: 0;
  background-color: #478B8D;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

.result-info .btn-bio:hover {
  background-color: #fff;
  color: #478B8D;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

.result-info li button i {
  display: block;
  font-size: 250%;
}


/* ---------------------------------------------- */


/* SEE MORE DO ARTIST */


/* ---------------------------------------------- */


/*container da pesquisa*/

.container-more-music {
  position: absolute;
  top: 120.8%;
  width: 100%;
}


/*estilização do titulo "you searched for...*/

.container-more-music h3 {
  text-align: center;
  text-transform: uppercase;
  font-size: 100%;
  font-weight: 300;
  letter-spacing: 1px;
}


/*container da pesquisa 1*/

.see-more-music {
  list-style: none;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-top: 1%;
  top: -80%;
}

.see-more-music li {
  display: block;
  float: left;
  width: 20%;
  height: 240px;
}


/* Container imagem da musica do artista */

.music-img {
  width: 100%;
  height: 240px;
  margin: 0;
  overflow: hidden;
  background-color: #666666;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.music-img:hover {
  background-color: #47888D;
}


/* img do artista */

.see-more-music li img {
  width: 100%;
  height: 100%;
}

.see-more-music li figure i {
  position: relative;
  top: 55px;
  left: 40%;
  font-size: 400%;
  color: #74C8D2;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.see-more-music li figure i:hover {
  color: #fff;
}
<!----------- Resultado de pesquisa de artista----------->

<div class="div-pesquisa wow FadeIn">

  <div class="row">
    <h3></h3>
  </div>


  <ul class="pesquisa Clearfix">

    <li><button class="go-back-btn" type="button" name="button" id="back-form-artist"><i class="ion-ios-arrow-back"></i>GO BACK</button></li>

    <li id="topmusic1">
      <figure class="music-img">
        <i class="ion-ios-play-circle"></i>
        <div class="info-music">
          <h6>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h6>
        </div>
      </figure>
    </li>

    <li id="topmusic2">
      <figure class="music-img">
        <i class="ion-ios-play-circle"></i>
        <div class="info-music">
          <h6>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h6>
        </div>
      </figure>
    </li>

    <li id="topmusic3">
      <figure class="music-img">
        <i class="ion-ios-play-circle"></i>
        <div class="info-music">
          <h6>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h6>
        </div>
      </figure>
    </li>


    <li><button class="see-more-btn" href="#more-music" type="button" name="button" id="your-playlist"><i class="ion-ios-add"></i>SEE MORE</button></li>

  </ul>




  <ul class="result-info">
    <li><button class="btn-playlists" type="button" name="button" id="your-playlist"><i class="ion-ios-musical-notes"></i>PLAYLISTS</button></li>

    <li><button class="btn-albums" type="button" name="button" id="top-albums"><i class="ion-ios-albums"></i>TOP ALBUMS</button></li>

    <li><button class="btn-bio" type="button" name="button" id="biography"><i class="ion-ios-person"></i>BIOGRAPHY</button></li>
  </ul>

</div>







<!------------------------- SEE MORE MUSIC ----------------------------->


<div class="container-more-music" id="more-music" style="overflow:scroll; height:400px;">

  <div class="row">
    <h3>You searched for...</h3>
  </div>


  <ul class="see-more-music Clearfix">

    <li><button class="go-back-btn" type="button" name="button" id="your-playlist"><i class="ion-ios-arrow-back"></i>GO BACK</button></li>

  </ul>
</div>

3
  • 3
    Consegue fazer um Exemplo Mínimo, Completo e Verificável? Provavelmente a maioria das pessoas aqui terá esses dois navegadores instalados e poderá testar seu exemplo.
    – Woss
    Commented 14/05/2018 às 19:22
  • Já inclui o codigo! Commented 14/05/2018 às 20:33
  • 1
    testei o código nos dois navegadores e o resultado foi rigorosamente o mesmo.
    – Sam
    Commented 19/05/2018 às 18:22

1 Resposta 1

0

A explicação é porque apesar do padrão HTML ser o mesmo para todos os navegadores, há diferenças pequenas nas implementações. Por isso que você vê diferenças.

Não é nem culpa deles, o padrão HTML muito provavelmente deixa algumas pequenas coisas a critério dos navegadores.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .