Skip to main content
adicionou 298 caracteres ao conteúdo
Fonte Link
jim
  • 165
  • 1
  • 3
  • 10
<!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="imgsrc="http:/posts/d1tvcultura.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>
    <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="img/posts/d1.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>
<!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>
Fonte Link
jim
  • 165
  • 1
  • 3
  • 10

Problema de compatilibidade com o Chrome e IE, texto deformado

Chrome:

inserir a descrição da imagem aqui

IE:

inserir a descrição da imagem aqui

No mozila:

inserir a descrição da imagem aqui

O certo seria ficar como esta no Mozilla. No chrome e no IE ele não esta certo.

Eu coloquei o texto em cima da imagem usando esse 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:

    <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="img/posts/d1.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>