html - 当我在与我的网站路线不同的路线上移动时，页面没有响应，如何解决？

Question

问题是，当我navigate到网站的不同路线时，加载了另一个组件，现在如果我尝试导航到旧路线显然css会全部获取messed up，Uioverlapping content实际上有一个高度，但现在父容器由于某种原因正在崩溃。这里的问题是，当我重新加载页面时，一切似乎都恢复了。这个问题有什么解决办法吗？

<div class="card" *ngFor = "let feed of game.gamearray;"  #widgetsContent>
                      <div class="head">
                          <div class="gamename">
                              <b>{{gendercheck}} {{feed.GameName}} <h6>- {{Age}}</h6></b>
                              <p>{{feed.Venue_Name | slice:0:30}}...</p>
                          </div>
                          <div class="result">
                              <b>{{feed.result}}</b>
                              <p> {{feed.MatchStarterUniqueName}}</p>
                          </div>  
                      </div>
                          <a routerLink="/opencard/{{feed.feedid}}">      
                              <div class="cardData">
                                  <div class="cardData team1">
                                      <img src={{feed.Team1Pic}} onerror="this.src='assets/images/user.png'">
                                      <p>{{feed.Team1name | slice:0:11}}</p>    
                                  </div>
                                  <div class="cardData t1score" style="margin-top: 5%;">
                                      <b style="font-size: 1.2em;">{{feed.scoreTeam1}}</b>
                                      <b style="font-size: 1.2em;">{{feed.scoreTeam2}}</b>
                                  </div>
                                  <div class="cardData team2">
                                    <img src={{feed.Team2Pic}} onerror="this.src='assets/images/user.png'">
                                    <p>{{feed.Team2name | slice:0:11}}</p>
                                  </div>     
                            </div> 
                          </a> 
                        <div class="matchstatus">
                            <textarea disabled>{{feed.EventText | slice:0:100}}..</textarea>
                        </div>
                    <div class="footer">
                      <button class="footer Button"><span *ngIf="feed.JoineeCount">{{feed.JoineeCount}}</span> Joinee</button>
                      <button class="footer Button"><span *ngIf="feed.PromoteCount">{{feed.PromoteCount}}</span> Promote</button>
                      <button class="footer Button">Subscribe</button>
                      <button class="footer Button"><span *ngIf="feed.CommentCount">{{feed.CommentCount}}</span> Talk</button>
                </div> 
              </div>  

CSS 代码：

.card{
    scroll-snap-align: start;
    margin: 1% 2.4% 0% 0%;
    border-radius: 2%;
    /* display: grid; */
    display: block;
    grid-template-rows: 100px 300px;
    width: 31%;
    height: 210px;
    margin-bottom: 1%;
    border-radius: 2%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 0 rgba(0, 0, 0, 0.10);
}
.cardData{
    float: left;
    width: 100%;
    height: 65px;
    margin: 2% 0% 2% 0%;
}
.cardData>div{
    margin-top: 0%;
    margin-left: 2%;
}
.head{
    width: 100%;
    height: 38px;
    border-bottom: 1px solid #dddddd;
}
.gamename{
    height: 100%;
    width: 60%;
    float:left;
    padding: 1%;
}
.gamename>b{
    display: inline-flex;
    font-size: 0.8em;
}
.gamename>b>h6{
    font-size: .8em;
    color: #686868;
}
.gamename>p {
    font-size: 0.7em;
    font-weight: lighter;
}

.result {
    height: 100%;
    width: 30%;
    float: right;
    padding: 1%;
}
.result b,.result p {
    float: right;
}
.result b {
    font-size: 0.8em;
}

.result p {
    font-size: 0.7em;
    font-weight: bold;
    color: #024771;
}

这是我卡的响应式 UI：

无反应卡：

标签： htmlcssangular6