8

border-radius を使用するページがあります。ネイティブの Android ブラウザーでは四捨五入されて表示されません。四角い角で表示されます。デスクトップの Chrome、IE、FF などでは丸められて表示されますが、ネイティブの電話ブラウザでは表示されません。これがブラウザ自体の問題なのか、私が使用していない追加の CSS 拡張などの問題なのか、誰にもわかりませんか?

これが私のCSSです（デモ内）：

.bigButton2
{
    width: 320px; height: 200px; margin: auto;
    padding: 20px;
    background-color: #521c0b; color: #FFFFFF;
    border: 3px solid #e3b21e;
    border-radius: 30px;    
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
}

JSFiddle をセットアップしました: http://jsfiddle.net/VJvQA/

パディングなし、ボックスサイジングあり、ボックスサイジングなしで試してみましたが、鋭い角として表示されます。どんな助けや洞察もいただければ幸いです。

誰かがこれを既に投稿したことを認識しています ( border-radius style does not work in android browser ) が、彼はコード JSFiddle を提供しておらず、実際の回答のない一般的な質問で誤って回答されました。できれば反対票を投じますが、実際によく書かれた質問を提供する方が良いと思いました。ありがとう！

4

4 に答える 4

17

この問題は、Galaxy S4 および S4 Active の Android ブラウザーに固有のものであることが判明しました。condensed border-radius プロパティのサポートが壊れたようですが、各コーナーを個別に指定すると問題なく動作します。Androidにバグレポートを投稿しています。したがって、これを行う場合：

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

正常に動作します。border-radius: 10px; しかない場合 無視されます。

これは、次の投稿で回答されました: Galaxy S4 ストック ブラウザー CSS3 ボーダー半径サポート? ここだけ繰り返します。しかし、私は彼らのソリューションをテストしました.Galaxy S4 Activeでも問題なく動作しています.

于 2013-07-31T16:00:54.313 に答える
1

残念ながら、一部のブラウザーは特定の HTML5 および CSS3 プロパティをサポートしていません。私のアドバイスと Web で見られる一般的なアドバイスは、すべてのブラウザーで機能し、見栄えがするようにサイトを設計してから、戻って CSS3 と HTML5 要素を追加で追加することです。

これは、さまざまなブラウザでの HTML5 と CSS3 のサポートを示す適切に設計およびレイアウトされた表ですが、モバイル ブラウザのサポートは示していません。

このリンクは、モバイル デバイスのサポートを示しています。

編集 2019-11-07

HTML5 と CSS3 は、数年前にさかのぼる最新のすべてのブラウザーで広くサポートされており、さらに、はるかに古いブラウザーをサポートする必要がある場合にポリフィルを提供するように設計された多くの JavaScript プラグインがあるため、この質問と私の元の回答はどちらも非常に時代遅れです。

その意味で、わずか5年ほどで私たちがここまで来たのはかなり驚くべきことです:)

新しい答え: HTML5 と CSS3 のすべて!

于 2013-07-31T15:15:55.417 に答える
-1

あなたのコードは間違っていないと思います.doによってタブレットデバイスに表示できません。背景の境界線はこのエラーを修正する必要があり、行を削除する必要があります

background-color: #521c0b; 
color: #FFFFFF;

または行の削除

border: 3px solid red

これはバグではないと思います。上記のように多くの作業に遭遇しました:) p / s:申し訳ありませんが、私の英語はあまり上手ではありません

于 2014-01-21T07:53:36.793 に答える