border-radiusは現代のネイティブAndroidブラウザでは機能しません

私はborder-radiusを使用するページを持っています。それはネイティブのAndroidブラウザでは丸められません。四角いコーナーで表示されます。デスクトップのChrome、IE、FFなどでは丸められていますが、ネイティブの電話機ブラウザでは表示されません。これはブラウザ自体に問題があるかどうか、誰かが私が使用していないその他のCSS拡張機能などを知っていますか？border-radiusは現代のネイティブAndroidブラウザでは機能しません

ここでは（デモでは）私のCSSです：

私はJSFiddleを設定した

.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; 
}

：http://jsfiddle.net/VJvQA/

私はボックス - なしで、箱のサイズ変更と、パディングなしに、パディングを試してみましたサイジング、それはちょうど鋭いコーナーとして表示されます。助けや洞察力があれば感謝します。

誰かがこれを既に（border-radius style doesn't work in android browser）の下に掲載していることに気づきましたが、JSFiddleというコードは提供していませんでした。私はそれをdownvoteすることができれば、私は実際のよく書かれた質問が良いだろうprodvidingと仮定。ありがとう！

出典

2013-07-31 HBlackorby

私はGalaxy S4 ActiveでAndroidでテストしました。 – HBlackorby

さまざまなブラウザが異なるHTML5とCSS3の機能をサポートしていますが、それはウェブ開発の一部に過ぎません。 – Robadob

それでいいと思いますが、http://caniuse.com/border-radiusによれば、Androidブラウザではうまくいくはずですので、このブラウザ実装のバグかどうかを確認しようとしています私のCSSに矛盾が生じたり、問題の原因となっているCSSがどのように書かれていますか？ – HBlackorby

この問題は、Galaxy S4とS4 ActiveのAndroidブラウザに固有の問題です。凝縮された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 stock browser CSS3 border-radius support? 私はここでそれを繰り返しています。しかし、私は彼らの解決策をテストしました。そして、Galaxy S4 Activeでも今はうまくいきます。

出典

2013-07-31 16:00:54 HBlackorby

あなたの執拗さと、それは奇妙な不一致です。 – Robadob

私はS4でCyanogenmod 11を実行していますが、この回避策でも動作していないようです。 – chris

さて、レノボの古いモデルではうまくいきません。古いデバイスはリタイアする必要があります。 – stonyau

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

これはうまく設計されており、table showing HTML5 and CSS3 support across browsersとなっていますが、モバイルブラウザのサポートは示されていません。

This linkは、モバイルデバイスのサポートを示します。

出典

2013-07-31 15:15:55 samrap

自分のリンク（2番目のリンク）によれば、Androidブラウザは丸い角をサポートする必要があるので、そのCSSを壊している。 – HBlackorby

それは本当に変です。どのブラウザでもボーダー半径の問題に遭遇したことはありません。しかし、あなたのコードは完全にうまく見えます。 – samrap

ボタンの場合は、ホバリング疑惑があると仮定していますか？そうしている場合は、境界線の半径も設定してみてください。カスケードの下限よりも低いので、境界の半径をデフォルトであるnoneに変更することができます。暗闇の中のちょっとしたショット@HBlackorby – samrap

-1

私はあなたのコードが間違っていないと思う、それはタブレットのデバイスでは表示できません。背景の境界線は、あなたがライン

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

または行

border: 3px solid red

の削除を削除する必要があり、このエラーを修正する必要があります私は、これはバグではありませんだと思うと、私は上記のように多くの作業を会った:) p/s：申し訳ありませんが、私の英語はあまり良くありません

出典

2014-01-21 07:53:36 user3213664

CSSを個別のプロパティに分割するという上記の答えは、この問題を修正します。背景色や通常の枠線のCSSに問題はありません。 – HBlackorby

border-radiusは現代のネイティブAndroidブラウザでは機能しません

答えて

関連する問題