[BootStrap] Lien dans un composant card avec IE11

**flexi2202** · 17/01/2021, 22h59

je me suis inspiré 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 situé en dessous qui se 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

l'image ci-jointe ok représente une copie d'écran de ce que j'ai lorsque le lien hypertexte n'est pas ajouté

l'image ci-jointe no représente une copie d'écran de ce que j'ai lorsque le lien hypertexte est ajouté

comment y remédier merci de l'aide

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!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>

**NoSmoking** · 18/01/2021, 09h12

Bonjour,
tu devrais pouvoir résoudre ce soucis d'affichage en ajoutant à ton CSS perso la règle suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.card-link {
  flex: 0 0 auto;
}

Il te faut bien sûr ajouter cette classe à tes liens, exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<a class="card-link" href="https://1max2peche.com/magazine/03/#page/1" >
  <img class="card-img-top" src="peche-perle-gardon-5.jpg"  alt="Card image cap">
</a>

Remarque quand même, il n'est peut être pas nécessaire de perdre trop de temps avec ce genre de détail pour IE, le visiteur ne sachant peut-être même pas que cet espace n'est pas voulu

.

[BootStrap] Lien dans un composant card avec IE11

Framework CSS Bootstrap

Vue hybride

Discussions similaires

Partager

Partager