JQuery не отображает углы в приложении Windows Phone 8 phone gap

У меня есть приложение Phonegap для Windows Phone 8, которое использует веб-страницы внутри. Я делаю кнопку внутри элемента <div> с опцией data-role="footer" внутри этого div. Также кнопка представляет собой элемент <a> с опцией data-role="button" внутри него.

Кнопка не отображается всегда хорошо, на ней появляются угловые проблемы, угол не закруглен, но это белый угол 90 градусов вместо голубого красивого закругленного угла.

Есть ли какие-либо известные проблемы на Windows Phone 8, что он не поддерживает некоторые функции HTML5 и/или функции jQuery?

Изменить 1:

Источники (основные части):

TestButton.java:

public class TestButton extends Widget {
       private static TestButtonUiBinder uiBinder = GWT.create(TestButtonUiBinder.class);

       interface TestButtonUiBinder extends UiBinder<AnchorElement, TestButton> {}

       AnchorElement mAnchor;

       public TestButton() {

            mAnchor = uiBinder.createAndBindUi(this);

            setElement(mAnchor);

            mAnchor.setAttribute("data-role", "button");
       }
}

.. и TestViewImpl.java:

    @UiField
    TestButton mBackButton;

    @Override
    public TestButton getBackButton() {
        return mBackButton;
    }

.. и TestViewImpl.ui.xml:

  <b:TestButton ui:field="mBackButton" dataIcon="arrow-l"
                title="{mI18n.back}" toolbarRight="true" />

Изменить 2:

Ошибка пограничного радиуса на <a> в IE9 указывает, что подобные проблемы могут возникать из-за незрелого характера css3, когда некоторые комбинации тегов css3 плохо работают вместе.

Теперь моя кнопка отображается в Firefox следующим образом:

<a style="font-weight: bold;" data-role="button" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-hover-b ui-btn-up-b"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Back</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>

Ответ 1

Если кто-либо не предложит какое-либо обходное решение, текущие мои исследования показывают, что это ошибка в самом jQuery, и обходной путь следует искать вне jQuery или исправлять сам jQuery.

Источник: Пожалуйста, посмотрите демонстрационную страницу jQuery, например. http://jquerymobile.com/demos/1.1.1/docs/buttons/buttons-themes.html и наблюдать, например. Swatch "a" с демонстрационной страницы с устройством wp8. Вы увидите странные углы. Я протестировал Lumia 920.

Решение: Подождите 1.4 и надейтесь на лучшее, или вручную объедините 1,2 и 1.3 и выберите лучшие части обоих.

Отредактированное решение: Да, 1.4.0 есть, и проблема, кажется, решена:) Они изменили весь внешний вид, поэтому проблема исчезла.

Ответ 2

В соответствии с этот ресурс, Windows Phone 7.5 и выше полностью поддерживает CSS 3 Основные стили (непрозрачность, фоны, текстовые эффекты, закругленные углы), что означает, что проблемы с рендерингом, которые вы испытываете, связаны не с несовместимостью.

Вы можете попробовать использовать -ms prefix для обеспечения полной функциональности IE9 + CSS3, например:

div {
    -ms-border-radius: 2px;
        border-radius: 2px;
}

(CSS-префиксы были приняты производителями браузеров для реализации своей версии черновиков CSS3. По мере созревания стандарта эти префиксы во многих случаях становятся устаревшими. В других случаях они по-прежнему требуются; читайте здесь для их дальнейшего использования в IE10.)

Ответ 3

Если бы аналогичная проблема пыталась отобразить круговую кнопку в компоненте WebBrowser в WP8 с border-radius:, она оказалась квадратной.

Решение: Добавить:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

в начало раздела <head>