17

我有一个用于 Windows Phone 8 的 Phonegap 应用程序，它在内部使用网页。我在该 div 内<div>带有选项的元素内制作了一个按钮。data-role="footer"按钮也是一个带有选项的<a>元素。data-role="button"

按钮的渲染并不总是很好，出现了一些边角问题，边角不是圆角，但它是一个 90 度的白色圆角，而不是蓝色的漂亮圆角。

Windows Phone 8 是否存在不支持某些 HTML5 功能和/或 jQuery 功能的已知问题？

编辑1：

来源（基本部分）：

测试按钮.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：

IE9 中 <a> 上的边框半径错误指出，当某些 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>
4

3 回答 3

3

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

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

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

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

于 2013-05-15T09:50:11.147 回答
0

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

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

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

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

于 2013-05-01T07:26:22.733 回答
0

尝试在 WP8 的 WebBrowser 组件中呈现圆形按钮时遇到了类似的问题，border-radius:但结果却是方形的。

解决方案：添加：

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

到该<head>部分的顶部

于 2015-01-24T13:33:08.980 回答