1493 sujets

Web Mobile et responsive web design

Problème affichage de card avec internet explorer 11

bonsoir a tous

je me suis inspire de ce code
https://codepen.io/integrationvault/pen/ZEGvpyp
pour créer des card avec boostrap 4.5 qui est donc censé être compatible avec internet explorer
mais lorsque j ajoute un lien herf cliquable afin de pouvoir ouvrir un nouvel onglet dans l image de la card j ai le titre et les paragraphes situe en dessous qui ce décale , cela ce passe bien avec firefox et chrome mais pas avec internet explorer
cela fait plusieurs jours que j essaye différents codes mais rien n y fait

voici donc ce que j ai lorsque le lien hypertexte n est pas ajoute
https://zupimages.net/up/21/02/r7hz.jpg
et voici ce qui ce passe avec le lien ajouter , cela est un soucis avec les images de la card mais comment y remédier
merci de l aide
https://zupimages.net/up/21/02/nbxk.jpg

voici le code 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial
  <title>CodePen - Bootstrap 4 card deck responsive</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
   

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
 



<style>

.card-img-top {
max-height:400px;
 
}
.card-deck {
  margin: 0 0;
  justify-content: space-between;
  max-height:600px;
}

.card-deck .card {
  margin: 0 0 1rem;

}

@media (min-width: 576px) and (max-width: 767.98px) {
  .card-deck .card {
    -ms-flex: 0 0 48.7%;
    flex: 0 0 48.7%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .card-deck .card {
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
  }
}

@media (min-width: 992px)
{
  .card-deck .card {
    -ms-flex: 0 0 16%;
    flex: 0 0 16%;
  }
}
</style>
</head>
<body>
<div class="container"style=" max-width: 1440px;">




  <div class="card-deck">
    <div class="card">
    <a href="https://1max2peche.com/magazine/03/#page/1" ><img class="card-img-top" src="peche-perle-gardon-5.jpg"  alt="Card image cap"></a>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
	 <div class="card">
   <a href="https://1max2peche.com/magazine/03/#page/1" ><img class="card-img-top" src="peche-perle-gardon-5.jpg"  alt="Card image cap"></a>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
	 <div class="card">
     <a href="https://1max2peche.com/magazine/03/#page/1" ><img class="card-img-top" src="peche-perle-gardon-5.jpg"  alt="Card image cap"></a>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
     <div class="card">
      <a href="https://1max2peche.com/magazine/03/#page/1" ><img class="card-img-top" src="peche-perle-gardon-5.jpg"  alt="Card image cap"></a>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
     <div class="card">
     <a href="https://1max2peche.com/magazine/03/#page/1" ><img class="card-img-top" src="peche-perle-gardon-5.jpg"  alt="Card image cap"></a>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
   <div class="card">
    <a href="https://1max2peche.com/magazine/03/#page/1" ><img class="card-img-top" src="peche-perle-gardon-5.jpg"  alt="Card image cap"></a>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

Modifié par flexi2202 (17 Jan 2021 - 22:57)
Modérateur
Bonjour,
flexi2202 a écrit :
...cela ce passe bien avec firefox et chrome mais pas avec internet explorer

Tu perds ton temps avec Internet Explorer. Sa part de marché doit être de l'ordre de 1%, Microsoft fait tout en ce moment pour qu'il disparaisse et il y a au moins une dizaine d'autres navigateurs qui ont des parts de marché supérieures.

Ne pas confondre avec Microsoft Edge qui lui se porte de mieux en mieux, et qui peut être intéressant à inclure dans tes tests (même si les mauvaises surprises sont devenues rares).

Amicalement,
Administrateur
Hello,

Je ne vois pas de display: flex sur le parent (ni la version -ms-display: flexbox; pour IE11), c'est normal ?
bonjour
merci pour l aide
oui je sais que internet explorer c est fini mais je souhaiterais savoir pourquoi cela ne fonctionne pas avec , alors que cela devrait

bonjour raphael
euhhh je sais pas ...
c est cela qui manque d après toi pour que cela fonctionne
je dois les placer a quel endroits ces codes stp merci
Sujet clos
Aller à