1

嘿，我在使用 jqm 构建 jquery-mobile-page 时遇到了奇怪的问题

我想将自定义图像设置为我自己的按钮图标mobile.css：

#foo1 .ui-icon-forward { height: 38px;width:38px;padding:15px;overflow:hidden; background:url(../images/m/btns.gif) no-repeat 0 0;
}
#foo1 .ui-icon-alert { height: 38px;width:38px;padding:15px;overflow:hidden; background:url(../images/m/btns.gif) no-repeat 0 0;
}
#foo1 .ui-icon-delete { height: 38px;width:38px;padding:15px;overflow:hidden; background:url(../images/m/btns.gif) no-repeat 0 0;
}
#foo1 .ui-icon-home { height: 38px;width:38px;padding:15px;overflow:hidden; background:url(../images/m/btns.gif) no-repeat 0 0;
}
#foo1 .ui-icon-search { height: 38px;width:38px;padding:15px; overflow:hidden;background:url(../images/m/btns.gif) no-repeat 0 0;
}

这是图像（我知道它们都指向上面css中的第一个）：

在此处输入图像描述

她的 html ：

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>immobile</title>
        <meta name = "viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <link rel="stylesheet" href="jquerymobile.css"/>
        <link rel="stylesheet" type="text/css" href="mobile.css"/>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    </head>
    <body>
        <div id="wrapper" data-role="page">
    <div id="hpwrap">
               <div data-role="header"  data-theme="d"  data-position="fixed">
        <div data-role="navbar" data-corners="false" data-id="headerm" id="foo1">
            <ul>
                <li><a href="#" class="ui-btn-active ui-state-persist"  data-role="button"  data-icon="home" data-transition="fade"></a></li>
                <li><a href="#" data-role="button"  data-icon="search" data-transition="fade"></a></li>
                <li><a href="#"  data-role="button" data-mini="true" data-inline="true"  data-ajax="false" data-icon="delete" id="nonMobile" rel="      external" data-theme="d"></a></li>
            </ul>
        </div>
    </div>
    <div data-role="content">
    <p style="color:white;text-align:center;font-weight:bold;">
        what the *'$§%' is going on with the images and why ?
    </p>
    </div>
    </body>
    </html>

在每个现代桌面浏览器中，这看起来都不错

喜欢在此处输入图像描述

但在 Iphone 或 android 手机上，它看起来更像：

在此处输入图像描述

所以这很奇怪，它与是否使用精灵无关，我什至尝试了不同的 img-file-types (jpeg,gif,png) ，尝试添加 z-indiziees 玩弄填充和东西，尝试删除效果就像 jqm.css 中 .ui-btn-stuff 的 text-shadow 和 ie-fixes 以及其他 2 天的尝试现在我被卡住了但真的想使用我的图标:) 所以在上面的场景中 jqm 没有任何变化-source-files 和我所有的尝试都没有帮助

也许有人以前遇到过这个问题，或者在 jqm.css 中有任何提示或行？提前致谢

4

1 回答 1

0

修复了使用我自己的数据图标的问题

喜欢

data-icon="myOwnIcon"

和CSS一样

.ui-icon-myOwnIcon {
   background: url(../images/m/2map.png) no-repeat rgba(0, 0, 0, 0.4) !important;
}

仍然不知道为什么，但是这样可以正确渲染图像

于 2013-05-13T10:00:59.400 回答