9

これは現在 Android バグ 41913 です。開けてくれた人ありがとう！

これは、この古い質問とほとんど同じだと思いますが、そこのスクリーンショットは私が見ているものとは奇妙に異なって見えます.

私がやろうとしているのは、この JSBIN の例のように、上部の境界線が太く、角が丸いボックスを作成することです。これは、デスクトップ ブラウザー (border-radiusサポートされているブラウザー) と iOS Safari および Chrome を使用する Android では正常に動作しますが、古い Android ブラウザーでは次のように表示されます。

アンドロイド
（出典：gutfullofbeer.net）

境界線は、曲線を超えた太い部分が端にならないようにレンダリングされます。ブラウザにこれを適切に実行させる方法があるかどうか、誰かが知っていますか? これは、少なくとも Android 2.3 までさかのぼる一貫したバグのようです。スクリーンショットは 4.0.3 電話のものです。

JSBIN の HTML は次のとおりです。

<body class=single>
  <div class=dialog-bound>
    Hello World
  </div>
</body>

および CSS (実際のプロジェクトから取得したクラス名):

body.single {
  background-color: #336699;
  font-size: 16px;
}

body.single .dialog-bound {
  background-color: #FFFCF2/*#mainBackground*/;
  margin: 50px auto;
  max-width: 32em;
  border-width: 28px 0 8px 0;
  border-style: solid;
  border-color: #89BAE2;
  -webkit-border-radius: 10px 10px 5px 5px;
  border-radius: 10px 10px 5px 5px;
  padding: 0 5px 2px 5px;
}

編集— ここでもう 1 つ注意点があります。私の HTC One X フォンと Nexus 7 では、上記の CSS は Chrome と Firefox で完全に機能します。また、Firefox の Android 2.3 で私の Atrix でも動作します。したがって、これらのデバイスのすべてのブラウザーがビューポートのサイズに同意しているため、仮想ピクセルと実際のピクセルの問題であるとは思えません。

4

3 に答える 3

3

これはAndroidブラウザの問題であり、丸みを帯びた角を描画しますborder-width。半径よりも大きい場合は、半径の領域が塗りつぶされません。

境界線が半径よりも小さい場合も、ブラウザはそれをうまく描画しません（http://jsbin.com/uxawuf/1で確認できます） 。

アンドロイドのバグトラッカーに関連する問題は見当たりません。境界線の半径を使用して影を作成することについての問題があります。これは同じ問題だと思います。おそらく、問題を開くことをお勧めします（私はそれに取り組んでいます：P）

これは良い答えとは見なされないことはわかっています：Pですが、この効果が必要な場合は、境界の上部と下部の2つのdivを追加し、半径と背景を使用してトリックを実行できます:(ここでは例：http://jsbin.com/exexol/9）

<body class=single>
  <div class=dialog-bound>
    <div class="bordertop"></div>
    <div class="content">Hello World</div>
    <div class="borderbottom"></div>
  </div>
</body>

およびcss：

body.single {
  background-color: #336699;
  font-size: 16px;
}

body.single .dialog-bound{
  margin: 50px auto;
  max-width: 32em;
  background: transparent;
}
body.single .dialog-bound .content{
  padding: 0 5px 2px 5px;
  background-color: #FFFCF2;

}
body.single .dialog-bound .bordertop{
  border-radius: 10px 10px 0px 0px;
  background:#89BAE2;
  height:28px;
  -webkit-border-radius: 10px 10px 0 0;
}
body.single .dialog-bound .borderbottom{
  border-radius: 0 0 5px 5px;
  background:#89BAE2;
  height:8px;
  -webkit-border-radius: 0 0 5px 5px;
}

私のテストは完全に更新された銀河ネクサスで行われます。

于 2012-12-26T00:49:48.947 に答える
1

これは確かにAndroidのバグhttp://jsbin.com/uzuril/17ですが、このhttp://jsbin.com/uzuril/15のような疑似要素でだまされる可能性があります

HTMLコードは同じです。このようなLESSのCSSは、Sony EricssonXperiaのAndroid4.0.3のデフォルトブラウザと、同じ電話の最新のChromeモバイルでテストされています。

body.single {
  background-color: #336699;
  font-size: 16px;
}

body.single .dialog-bound {
  background-color: #FFFCF2/*#mainBackground*/;
  padding: 2px 5px 4px 5px;
  position: relative;
  margin: 50px auto;
  max-width: 32em;

  &::after,
  &::before {
    border-style: solid;
    border-color: #89BAE2;
    content: '';
    left: 0; right: 0;
    position: absolute;
  }

  &::after {
    border-width: 1.8em 1.8em 0 1.8em;
    top: 2px; margin-top: -1.8em;
    border-radius: .6em .6em 0 0;
  }

  &::before {
    border-width: 0 0.6em 0.6em 0.6em;
    bottom: 2px; margin-bottom: -0.6em;
    border-radius: 0 0 .3em .3em;
  }
}
于 2012-12-30T16:31:44.547 に答える
0

プロパティを表示できる max-width: 32em;ので、フォントが「Hello World」の境界線が来ると境界線が大きくなり、フォントの境界線の後または前が小さくなることに気付くはずです..

実際には max-width: http://reference.sitepoint.com/css/max-widthプロパティはフォントサイズを調整して動作しています。

したがって、この問題のプロパティを修正する必要があります Width=% used

于 2012-12-20T16:50:06.697 に答える