同父容器下同class的Div显示效果不一致问题求助

我正在开发一个冰球球员数据排序项目，完成排序功能后发现：同一父容器内，手动编写的两个带joueur类的Div，与通过JavaScript for循环动态生成的同class Div显示效果存在差异。经检查两类Div的类名、内部元素、所处位置均一致，但无法定位问题原因，相关代码如下：

HTML代码 #

<pre id="stats-hockey">
        Connor McDavid;EDM;24;80;44;79;123;45;28;22:03;314
        Johnny Gaudreau;CGY;28;82;40;75;115;26;64;18:34;262
        Jonathan Huberdeau;FLA;28;80;30;85;115;54;35;19:25;222
        Leon Draisaitl;EDM;26;80;55;55;110;40;17;22:20;278
</pre>
<!--J.T. Miller n'est pas en ordre à cause du point-->

<div id="liste">

  <div class="joueur">
    <div class="nom">Bill Barilko</div>
    <div class="equipe">TOR</div>
    <div class="buts">buts: 8</div>
    <div class="tirs-au-but">tirs: 35</div>
  </div>
  <div class="joueur">
    <div class="nom">Alexander Mogilny</div>
    <div class="equipe">BUF</div>
    <div class="buts">buts: 76</div>
    <div class="tirs-au-but">tirs: 323</div>
  </div>

</div>

CSS代码 #

* {
  box-sizing: border-box;
}

#stats-hockey {
  visibility: hidden;
  height: 0px;
}

.joueur {
  position: relative;
  width: 700px;
  border-bottom: 1px solid white;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.nom {
  display: inline-block;
  background-color: lightblue;
  font-weight: bold;
  width: 280px;
}

.equipe {
  display: inline-block;
  background-color: rgb(153, 194, 192);
  width: 65px;
  text-align: center;
}

.buts {
  display: inline-block;
  background-color: lightblue;
  padding-left: 10px;
  width: 165px;
}

.tirs-au-but {
  display: inline-block;
  background-color: rgb(153, 194, 192);
  padding-left: 10px;
  width: 175px;
}

JavaScript代码 #

let listeDiv = document.getElementById("liste");

let elementStats = document.getElementById("stats-hockey");
let textStats = elementStats.innerHTML;

// sépare le texte au caractère "new line"
let ligneStats = textStats.split("\n"); // Est-ce que c'est correct si j'ai changé l'ordre un peu ?

class Joueur {
  nom = "";
  equipe = "";
  buts = 0;
  tirsAuBut = 0;

  constructor(_nom, _equipe, _buts, _tirsAuBut) {
    this.nom = _nom;
    this.equipe = _equipe;
    this.buts = _buts;
    this.tirsAuBut = _tirsAuBut;
  }
}

let tableauComplet = new Array();

for (let ligneIndex = 0; ligneIndex < ligneStats.length; ligneIndex++) {
  let tableauStatsIndividuelles = ligneStats[ligneIndex];
  tableauStatsIndividuelles = tableauStatsIndividuelles.trim();

  if (tableauStatsIndividuelles != "") {
    tableauStatsIndividuelles = tableauStatsIndividuelles.split(";");

    let nom = tableauStatsIndividuelles[0];
    let equipe = tableauStatsIndividuelles[1];
    let buts = tableauStatsIndividuelles[4];
    let tirsAuBut = tableauStatsIndividuelles[10];

    let joueur = new Joueur(nom, equipe, buts, tirsAuBut);
    tableauComplet.push(joueur);
  }
}

function afficherJoueurs() // Animation pour les pays
{
  //liste.innerText = "";

  for (let rangeeIndex = 0; rangeeIndex < 3; rangeeIndex++) {
    let joueur = tableauComplet[rangeeIndex];

    let joueurDiv = document.createElement("div");
    let nomDiv = document.createElement("div");
    let equipeDiv = document.createElement("div");
    let butsDiv = document.createElement("div");
    let tirsAuButDiv = document.createElement("div");

    joueurDiv.className = "joueur";
    nomDiv.className = "nom";
    equipeDiv.className = "equipe";
    butsDiv.className = "buts";
    tirsAuButDiv.className = "tirs-au-but";

    nomDiv.innerText = tableauComplet[rangeeIndex].nom;
    equipeDiv.innerText = tableauComplet[rangeeIndex].equipe;
    butsDiv.innerText = "buts : " + tableauComplet[rangeeIndex].buts;
    tirsAuButDiv.innerText = "tirs : " + tableauComplet[rangeeIndex].tirsAuBut;

    joueurDiv.append(nomDiv, equipeDiv, butsDiv, tirsAuButDiv);

    liste.append(joueurDiv);
  }

}

afficherJoueurs();

补充说明：代码中大部分为法语，因是学校项目要求，无法更改，敬请谅解。

内容的提问来源于stack exchange，提问作者rootbeer2017