0

Android Webkit ブラウザーで問題が発生しています。これは、Android 4.0.3 以前で発生しています。このデザインでは、div 内に 15 ピクセルの上部境界線が必要であり、角が丸くなっています。これを実現するために border-radius を使用しています。これは最新のすべてのブラウザーで正常に動作しますが、Android では次のようになります。

http://i.stack.imgur.com/5oEuD.png

HTML は次のようになります。

<section class=" sub_nav" id="quick_access_section">
 <header>
    <h1>Headline</h1>
    </header>
    <div class="wrapper cw_humans">
        ....
        <div class="text">Nam condimentum viverra nulla sed pulvinar nisl posu</div>
        ....
        </div>
    </div>
</section>

CSS は次のようになります。

section {
  background: #f2f4f7;
  border-top: 15px solid #1a293a;
  border-radius: 6px;
  -webkit-box-shadow: 0px 5px 10px #bfc4ca;
  -moz-box-shadow: 0px 5px 10px #bfc4ca;
  box-shadow: 0px 5px 10px #bfc4ca;
  margin: 0 auto;
  width: 80%;
}

Mac OS 上の Chrome、Apple の Webkit、および Androi Chrome では、次のようになります。

http://i.stack.imgur.com/2PoiZ.png

他の誰かがこれを以前に見たことがあるかどうか、私は興味があります。予想どおり、効果のない webkit プレフィックスを使用しました。

4

1 に答える 1

0

Android の px は、ディスプレイが異なるため異なる場合があるため、デバイスに依存しない測定値を使用すると、すべてを一定に保つことができます。Em は、デフォルトのフォント サイズ (通常は 16 ピクセル) に対して相対的であるため、物事を一定に保つ簡単な方法です。すべてのブラウザに同じ開始点を与える css を使用して、デフォルトの font-size を変更できます。

于 2012-07-20T19:06:55.577 に答える