WordPressの奇妙なブラウザ関連のCSS列の問題

Question

WordPressの開発を頻繁に行っているときにブラウザー関連の問題が発生することはありませんが、この奇妙な理由を見つけるのは難しいですFirefox/Edge（Chromeで正常に動作し、他のブラウザではテストされていません）。

ウェブサイト：ホームページでhttp://stitchwear.com.br/

、我々は展示いくつかの製品を持っています。最後の列では、3つの製品を同じ行に並べる必要があります。最初の製品は右側に残り、他の2つは新しい行に移動します。 Chrome/Firefoxのデベロッパーツールでコードを確認しても、問題の原因となるクラスやスタイルは他にありません。このエラーは大きな画面でのみ発生するようにも見えるため、反応的な問題ではありません。

すべての商品は、各商品ごとに300pxの固定幅とulタグの固定幅900pxのCSSの順序付けられていないリストを使用して左揃えになります。 li要素のマージンやパディングはありません。

このようなブラウザー関連の問題が見つからないため、どこから見ているか分かりません。私はこのウェブサイトを開発していないが、私はこの問題の修正に取り組んでいる。ブートストラップも使用しません。

あなたは私にいくつかの手がかりを与えることを願っています。

ありがとうございます！

Answer 1

FWIW、私はChromeとFFでページをロードしましたが、FFは間違いなくリストを壊してしまいました。理由はわかりません。私はそれを示すMCVEを作成しようとしましたが、成功しませんでした。リストアイテムの代わりにfloat:left、使用display:inline-block、インラインブロックで作成された余分なスペースに対応するために908pxに900pxからulの幅を変更：

しかし、修正があります。

Answer 2

お客様の商品の画像は、同じサイズではありません。これは、リスト項目の高さを違うものにしてレイアウトを台無しにしています。あなたの画像を同じサイズに保つか、このCSSを適用することができます。

.product-thumbnail { 
    overflow: hidden; 
    position: relative; 
} 
.product-thumbnail::before { 
    content: ""; 
    display: block; 
    padding-top: 133.33%; 
} 
.product-thumbnail img { 
    position: absolute; 
    top: 0; 
    width: 100%; 
}