Question

我有一个Windows Phone 8的Phonegap应用程序，它使用内部的网页。我在<div>元素内部创建了一个按钮，其中包含data-role="footer"选项。此外，按钮是<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：

Border-radius bug on <a> in 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>

Answer 1

除非有人建议任何解决方法，我当前的调查显示结果是这是jQuery本身的一个错误，应该在jQuery之外找到解决方法或修复jQuery本身。

来源：请查看jQuery演示页面，例如： http://jquerymobile.com/demos/1.1.1/docs/buttons/buttons-themes.html并观察，例如来自带有wp8设备的演示页面的Swatch "a"。你会观察到奇怪的角落。我测试了Lumia 920。

解决方案：等待1.4并希望最好，或者手动合并1.2和1.3并选择两者的最佳部分。

已编辑的解决方案：是的，1.4.0已经存在，问题似乎已经解决了:)他们改变了整个外观，所以问题就消失了。

Answer 2

根据this resource，Windows Phone 7.5及更高版本完全支持CSS 3 Basic样式（不透明度，背景，文本效果，圆角），这意味着您遇到的渲染问题不是由于不兼容。

您可能想尝试使用-ms prefix来确保完整的IE 9+ CSS3功能，例如：

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

（浏览器制造商采用CSS前缀来实现其CSS3草案功能版本。随着标准的成熟，这些前缀在许多情况下已经过时。在其他情况下，它们仍然是必需的; read here继续在IE10中使用。）

Answer 3

尝试使用border-radius:在WP8中的WebBrowser组件中呈现圆形按钮时遇到类似的问题，结果显示为方形。

解决方案：添加：

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

到<head>部分的顶部

在Windows Phone 8手机间隙应用程序中，jQuery不能很好地渲染角落

3 个答案: