2

次のコードのモバイル サイトのヘッダーで奇妙な問題が発生しました。

padding: 10px 5% 10px 5%;
width: 90%;

ここで効果を確認できます-> http://cssdesk.com/vEMCY

このコードを含む div は、幅 100% のパディングなしの div よりもわずかに短くなっています。

マージンをヘッダーの要素に丸め、パディングを取り除き、幅を100％に設定することで回避しましたが、最後に5 + 5 + 90 = 100をチェックしたので、なぜこれが行われたのか興味があります.

4

3 に答える 3

2

Webkitベースのブラウザには、パーセンテージ測定による丸めのバグがあります。

少し前に、私は非常によく似た質問をしましたが、それが問題のようでした。参照：Chromeとその％sの処理

問題の詳細を説明する投稿はここにあります（元々はbookcaseyによって共有されていました）。

于 2012-06-29T15:14:43.707 に答える
0

パーセンテージのパディングを使用する傾向がないため、CSS仕様でこれがどのように定義されているかわかりませんが、パディングは含まれている要素またはそれ自体に関連していますか？それが要素自体である場合、それは90％の5％、つまり4.5％になります。あなたはそれがどのように見えるかというように1％を失うでしょう。

于 2012-06-29T15:08:19.943 に答える
0

cssを解決しました

 .header {
 background: blue;
 width: 90%;
 padding:10px 5.05% 10px 5.05%;

}

しかし、この 0.1% のパディングが div#header のどこにあるのかを見つけることができませんでした...

于 2012-06-30T07:45:52.167 に答える