7

要素で使用display:table;していdivます。私がテストした他のすべてのブラウザでは、問題はありません。ただし、Chrome 22（最新）とカナリアでは、divは左側と右側の両方で1pxの間隔を受け取ります。

問題がどこにあるのか考えていますか？

編集：、、
marginはborderすべてpadding0です。

また、テーブルのプロパティはすべて削除されます。

border-spacing:0;
border-collapse:collapse;
table-layout:fixed;
4

5 に答える 5

8

私も同じ問題を抱えていました。これは、Microclearfixハックが原因でした。.clearfixスタイルを削除して問題を解決しました。

于 2013-02-18T19:42:35.257 に答える
1

また、空白を犯罪者の可能性があると見なし、でテストしfont-size: 0ます。

于 2012-11-02T15:54:37.350 に答える
0

すべてのブラウザでマージンとパディングをリセットします。

*{margin:0; padding:0;}

必要に応じて、リセットされたcssファイルをダウンロードすることもできます。

normalize.cssまたはreset.css

于 2012-11-02T15:17:41.743 に答える
0

この質問からの答えは私の問題を解決しました：ChromeのCSSテーブルセル

table-layout: fixed適用した要素に追加することをお勧めしますdisplay: table。

私の場合のように、マークアップに.clearfixハックが適用されていない場合は、これが役立つ可能性があります。

于 2015-06-08T21:16:57.190 に答える
0

私は2015年にこの問題に気づきました-それはグーグルクロームにのみ影響し、それを修正する唯一の方法はあなたのdisplay：tableを子コンテナに移動することです、それであなたが持っているなら：

<div style="width:50%; height:300px; display:table">
     <div style="display:table-cell; vertical-align: middle;">
          <p>Your centred content here</p>
     </div>
</div>

divをもう1つ追加して、次のように変更します。

<div style="width:50%;">
     <div style="display:table; height:300px;">
          <div style="display:table-cell; vertical-align: middle;">
               <p>Your centred content here</p>
          </div>
     </div>
</div>

グーグルクロームでは、同じタグに適用すると、幅とdisplay：tableとの競合があるようです。

chromeとfirefoxの両方で次のリンクを開くと、1pxの余分なギャップが追加されるため、右の境界線がfirefoxで整列しますが、chromeでは整列しないことがわかります。

簡単に言えば、私の修正はchromeで機能します:)

https://jsfiddle.net/2u1t8ffj/

左側のFirefox-問題ありません。右側のChrome-1pxのギャップ

于 2017-06-22T09:08:04.083 に答える