Compatibility problem with Chrome and IE, warped text

Asked

Viewed 36 times

0

Chrome:

inserir a descrição da imagem aqui

IE:

inserir a descrição da imagem aqui

On mozzarella:

inserir a descrição da imagem aqui

It would be right to look like this on Mozilla. On Chrome and IE it is not right.

I put the text on top of the image using this script:

CSS:

.img-containerAside{
    width: 359px;
    height: 184px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;

}

 .img-containerAside img{
   width: 100%;
   height: 100%;
   -webkit-transition: -webkit-transform .7s ease;
   transition: -webkit-transform .7s ease;
   -o-transition: transform .7s ease;
   transition: transform .7s ease;
   transition: transform .7s ease, -webkit-transform .7s ease;

}

.img-containerAside:hover img{
   -webkit-transform: scale(1.1);
   -ms-transform: scale(1.1);
      transform: scale(1.1);
}    

.indexDivImagemAside{
    width: 359px;
    height: 184px;
}

 ul.noticiasIndex li h4{
  font-weight: 800;
  position: absolute;
}

HTML:

<!DOCTYPE html>
<html>
<head>
   <title>sas</title>
   <link rel="stylesheet" type="text/css" href="sis.css">
   <style type="text/css">
   </style>
</head>
<body>
   <aside>

    <ul class="noticiasIndex">
        <li>
            <div class="img-containerAside">
                <div class="indexDivImagemAside">
                    <a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html"><img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg" alt="esqueleto.html"></a>
                </div>

                <h4><a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html">Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia</a></h4>
            </div>

                <p>Os arqueólogos acreditam que o homem estava fugindo das lavas do vulcão em busca de um lugar seguro, ele conseguiu escap...<a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html" id="continuelendo">Continue lendo &raquo;</a></p>

       </li>
    </ul>
</aside>
</body>
</html>
html css

  • tries to mount a snippet here, or in the codepen.io to make it easier to visualize the problem

  • @Ricardopunctual I updated the script. If you visualize this script in Mozilla, Chrome and IE, you will see that the text changes position in each one. The right one would look like this in Mozilla.

1 answer

1


What’s missing is a position: relative in div that houses the text. To use position: absolute, the father div must have some position other than Static, which is the standard (CSS position).

You also need to specify positioning properties (left, or right, or top or bottom). In your case it seems to me left and bottom.

Example:

.img-containerAside{
    width: 359px;
    height: 184px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        position: relative; /* propriedade adicionada */
        background-color: yellow; /* propriedade de exemplo */

}

 .img-containerAside img{
   width: 100%;
   height: 100%;
   -webkit-transition: -webkit-transform .7s ease;
   transition: -webkit-transform .7s ease;
   -o-transition: transform .7s ease;
   transition: transform .7s ease;
   transition: transform .7s ease, -webkit-transform .7s ease;

}

.img-containerAside:hover img{
   -webkit-transform: scale(1.1);
   -ms-transform: scale(1.1);
      transform: scale(1.1);
}    

.indexDivImagemAside{
    width: 359px;
    height: 184px;
}

 ul.noticiasIndex li h4{
  font-weight: 800;
  position: absolute;
  left: 0; /* propriedade adicionada */
  bottom: 0; /* propriedade adicionada */
}
<aside>

    <ul class="noticiasIndex">
        <li>
            <div class="img-containerAside">
                <div class="indexDivImagemAside">
                    <a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html"><img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg" alt="esqueleto.html"></a>
                </div>

                <h4><a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html">Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia</a></h4>
            </div>

                <p>Os arqueólogos acreditam que o homem estava fugindo das lavas do vulcão em busca de um lugar seguro, ele conseguiu escap...<a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html" id="continuelendo">Continue lendo &raquo;</a></p>

       </li>
    </ul>
</aside>

  • @Perfect. Thank you very much!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.