css - クロムパディングのパーセンテージ+幅のパーセンテージが加算されない

Question

Firefoxでは、私の結果は期待どおりです。フルサイズを追加widthして作成しようとしています。paddingChromeでは、これは機能していないようですが、

.tab-content {

padding: 10px 5% 10px 5%;
width:100% !important;

}

Firefoxでは、これにより110％（Idが期待しているもの）になり、Chromeでは100％になります。助けてくれてありがとう。

score 1 · Accepted Answer

CSS2 で 100% を使用すると、要素の最終的な幅 (CSS の幅ではない) は、border-left + padding-left + width + padding-right + border-right になります。

したがって、あなたの場合は 110% と解釈されます。

0 + 5% + 100% + 5% + 0 = 110%

完璧な解決策は次のとおりです。

.tab-content {
    padding: 10px 5% 10px 5%;
    width:90%;
}

CSS3 のbox-sizingプロパティを使うこともできますが、解釈の仕方にバグがあります。使用はお勧めしません。これを使用すると、CSS width プロパティにボーダーとパディングが含まれます。

score 0 · Accepted Answer

を試してみてください-webkit-box-sizing。それが問題を引き起こしている可能性があります。

2 に答える 2