Question

我正在将一些旧代码移动到jQuery Mobile并且有一个CSS三色按钮，但它似乎与JQM冲突，因为设计搞砸了。

我创建了一个jsFiddle，你可以看到按钮在没有JQM的情况下看起来没问题，但是如果你勾选jQuery Mobile 1.3.1文本太低（偏移？）我会得到一个奇怪的黑色blob按钮。

我的按钮背景就像 background: linear-gradient(to bottom, rgb(255, 255, 255) 33%, rgb(255, 98, 118) 33%, rgb(255, 98, 118) 66%, rgb(121, 178, 203) 66%);

我该如何解决这个问题？

Answer 1

文字和黑色斑点的移位是您在div之前放置的div.html-face

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-a">
                <input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;" class="ui-input-text ui-body-a">
            </div>

Answer 2

解决它的一种方法是不使用GWT按钮，而是使用JQM按钮，然后在自定义主题中添加CSS样式。

虽然JQM似乎不允许在按钮中手动换行，但How do I do a manual line break in an jQuery Mobile button?

中描述了一种解决方法

jQuery Mobile和CSS按钮

2 个答案: