Problème affichage de card avec internet explorer 11

Question

flexi2202

17 Jan 2021 à 22:24

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)

parsimonhi

Modérateur

18 Jan 2021 à 01:13

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,

Raphael

Administrateur

18 Jan 2021 à 08:20

Hello,

Je ne vois pas de display: flex sur le parent (ni la version -ms-display: flexbox; pour IE11), c'est normal ?

flexi2202

18 Jan 2021 à 16:16

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

Raphael

Administrateur

19 Jan 2021 à 08:52

flexi2202 a écrit :

bonjour raphael
euhhh je sais pas ...
c est cela qui manque d après toi pour que cela fonctionne

Hello,

Les propriétés de flexbox que tu as utilisées sur les éléments ne fonctionnent que si tu as créé un contexte flexbox, en clair si leur parent a un display: flex

Toutes les informations pour comprendre : https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

Bon apprentissage ! Smiley smile

flexi2202

19 Jan 2021 à 11:53

hello
merci pour les explications raphael
on va aller lire cela

Sujet clos

Web Mobile et responsive web design

Problème affichage de card avec internet explorer 11