Dies ist Android-Bug 41913 jetzt. Danke, wer auch immer es geöffnet hat!
Das ist, denke ich, ziemlich genau dasselbe wie diese ältere Frage , obwohl der Screenshot dort merkwürdig anders aussieht als das, was ich sehe.
Was ich versuche, ist, eine Box mit einem dicken oberen Rand und abgerundeten Ecken zu erstellen, wie in diesem JSBIN-Beispiel . Das funktioniert gut bei Desktop-Browsern (gut, mit border-radius support) und bei iOS Safari und Android mit Chrome, aber der alte Android-Browser zeigt dies:
android http://gutullofbeer.net/android.png
Die Umrandung wird so gerendert, dass der dickere Teil jenseits der Kurve nicht zum Rand kommt. Weiß jemand, ob es einen Weg gibt, den Browser dazu zu bringen, das richtig zu machen? Dies scheint ein konsistenter Fehler zu sein, der zumindest auf Android 2.3 zurückgeht; Der Screenshot stammt von einem Telefon der Version 4.0.3.
Hier ist der HTML-Code von JSBIN:
%Vor%und das CSS (Klassennamen, die aus dem aktuellen Projekt gezogen wurden):
%Vor%Bearbeiten - Hier ist noch eine weitere Sache: Auf meinem HTC One X-Telefon und auf meinem Nexus 7 funktioniert das obige CSS perfekt in Chrome und Firefox. Es funktioniert auch auf meinem Atrix unter Android 2.3 in Firefox. Daher bezweifle ich wirklich, dass es sich um ein Problem mit einem virtuellen Pixel im Vergleich zum tatsächlichen Pixel handelt, da alle Browser auf diesen Geräten hinsichtlich der Größe des Darstellungsbereichs übereinstimmen.
Es ist ein Problem des Android-Browsers, es zeichnet die abgerundete Ecke und wenn% code_% höher ist als der Radius, ist die Fläche des Radius nicht ausgefüllt.
Auch bei einem Rand, der kleiner als der Radius ist, zeichnet der Browser ihn nicht gut (Sie können Ссылка ) Ich sehe kein ähnliches Problem im Bug-Tracker von Android, es gibt einen über die Verwendung des Randradius, um Schatten zu erzeugen , dass ich denke, dass es das gleiche Problem ist, vielleicht ist es eine gute Idee, eine zu öffnen (ich bin dran es: P) Ich weiß, das wird nicht als eine gute Antwort gelten: P, aber wenn Sie diesen Effekt wollen, können Sie 2 Divs hinzufügen, eine für den Rand oben und andere für den Rand unten, und tun Sie den Trick mit Radius und Hintergrund:
(Hier das Beispiel: Ссылка ) und die CSS: Meine Tests sind in einem Galaxy Nexus vollständig aktualisiert.
Sie können Ihre Immobilie als
max-width: 32em;anzeigen, also sollten Sie es bemerken Ihre Grenze, dass ... wenn Schriftart "Hello World" Grenze wird kommen größer und nach oder vor der Schriftgrenze ist kleiner ..tatsächlich max-width: Ссылка Eigenschaft funktioniert Schriftgröße einstellbar.
also sollten Sie diese Problemeigenschaft beheben width =% used
