1

Chrome（またはFF？）でこの厄介な問題があります。IEはまだチェックしていません。レンダリングには 1 ピクセルの違いがあり、どこを掘り下げればよいかわかりません。3 つのブラウザー (FF、Opera、Chrome) のすべてのインスペクターを使用して、調整するものがあるかどうかを確認しましたが、成功しませんでした。これはバグであるか、このエラーを認識していません。

ここで例を参照してください: www.vanwright.com/catalogue/le-kex-walking-kids/

問題は、両方の行の左から最初の画像の左余白に関係しています。Chrome では 2px の境界線が表示されますが、他のブラウザーでは 1px が表示されます。これが私が求めているものです。nth-of-typeセレクターが原因ですか？ここ: www.vanwright.com/collections/ には同じ問題があるようです (margin-left: -10px は Chrome では 1px の行で表示されますが、FF/Opera にはスペースがありません)。

迷っています。何か案は？

ありがとう、ポップ

4

2 に答える 2

0

Chrome のバグです。時間を割いてくれた runspire に感謝します。修正不可能なものを修正しようとしている人には申し訳ありません。

クロムの背景センター (バグ)

于 2013-04-05T09:21:44.747 に答える
0

オプション1

960pxレイアウトを修正および維持するには:

:nth-of-typeすべてのcssを削除します.pi-pad

.pi-pad の css を次のように変更します。.pi-pad {margin: 1px 1px 1px 0; width: 318px; padding: 0px;}

背景を数学 960px レイアウトに修正 (現在は 979px レイアウト用に設計されていると思います);

オプション 2

背景に合わせて現在のレイアウトを拡張します。(背景の幅が 3 で割り切れないため、これは不格好です)

.containerおよび.span-12指定する必要のあるCSSwidth: 979px

.pi-pad:nth-of-type(3n+1)または.pi-pad:nth-of-type(3n)CSS のいずれかを読み取りwidth: 325px;、もう一方を削除するように変更します。

.pi-pad読むようにCSSを変更する.pi-pad {margin: 1px 1px 1px 0; width: 324px; padding: 0px;}

=========編集=========

上記の返信を見る前にこれを投稿しましたが、オーバーフローを隠すのも忘れていました。

オプション 2 を使用すると、980px であることがわかりました (測定すると 979 のように見えました)。

.containerそして.span-12持っているべきですwidth: 980px;

.pi-pad読むようにCSSを変更する.pi-pad {overflow: hidden; margin: 1px 1px 1px 0; width: 325px; padding: 0px;}

.pi-pad:nth-of-type(3n)ORを使用して、もう一方.pi-pad:nth-of-type(3n+1)を指定width: 326px;して削除する必要があります。

于 2013-04-04T17:40:59.120 に答える