Mozilla Firefoxで画像がちゃんと並ばない

下記スクリプトで、表示幅640pxに、画像幅212pxを3列に並べています。
しかし、Mozilla Firefoxだけ2列になってしまいます。

.thumbnail li {
float: left;
margin-right: 2px;
margin-bottom: 5px;
text-align: center;
}

.thumbnail li:nth-child(3n) {
margin-right: 0;
}

212+2+212+2+212=640でちゃんと並ぶはずなのですが。
よろしくお願いいたします。

質問者からの補足コメント

• 

  回答、ありがとうございます。
  ブラウザーチェックのため、
  IE、Google Chrome、Safari、Mozilla Firefox、Opera、Vivaldi、Sleipnir 6、Kinza
  で表示を確認していますが、Mozilla Firefoxだけ2列になってしまいます。
  HTML5でスクリプトは添付図のとおりです。
  よろしくお願いいたします。

  
    補足日時：2017/07/02 07:07

No.1 回答者： t_fumiaki 回答日時： 2017/07/02 05:30

実際のhtmlでは、liをulで囲んでいる筈。

このCSSだけからだとちゃんと並ぶ。

上位のcssか、html側の問題。

No.2 ベストアンサー 回答者： t_fumiaki 回答日時： 2017/07/02 12:42

ul id=・・・・は　ul class=・・・の間違いだと思いますが、

それはさて置き

li 中の<br />の解釈の問題だと思います。
各ブラウザがどの様に解釈するかです・・・。

画像の下に文字を入れたいのなら、以下にします。

<li><img src=・・・><p>涙の季節</p></li>
・
・
・

.thumbnail li p {・・・・・}
を追加して、 pタグの上下左右マージン、高さ、など設定して下さい。

これなら、どのブラウザでも解釈は同じです。

この回答へのお礼

t_fumiaki様
うまく3列に並びました。
ありがとうございます。

お礼日時：2017/07/02 13:33