Question

已解决 - 未链接到最新版本的jQuery js文件。傻傻的我！

我知道是什么导致了这个问题，但我不知道如何修复它或为什么会这样做。

在我的移动网站m.incrediblebats.com上，标题中有一个图片。问题是，当我使用原生Android浏览器时（尚未尝试其他浏览器应用程序）我触摸的按钮会转到右侧页面，但是当您触摸该按钮时应该在按钮周围的突出显示位于它下方的按钮。

以下是我尝试过的相同结果的方法：

img in header div
div wrapped img header div
在css文件中应用background-img和高度样式的div

对于最后一种方法，如果我将高度设置为小于我的图像大小（如10px），我就没有这个问题。

我认为标题div只能这么大？也许它不喜欢高度超过一定的尺寸？

无论如何，这是我目前的身体部分代码。

<body>
    <div data-role="page" data-theme="a">
        <div data-role="header">
            <img src="images/header.jpg" alt="Incredible Bats" />
        </div>
        <div data-role="content"> <a href="about.html" data-role="button" data-theme="a" data-transition="fade">About Us</a>
 <a href="batshows.html" data-role="button" data-theme="a">Live Bat Shows</a>
 <a href="ourbats.html" data-role="button" data-theme="a">Our Bats</a>
 <a href="contact.html" data-role="button" data-theme="a">Contact Information</a>   
            <img src="images/bg.gif" id="bg-img" alt="bats emerging" />
        </div>
        <div class="footer">
            <p>Copyright © 1998-2011 AFTAGC | <a href="www.incrediblebats.com/">Full Site</a>
            </p>
        </div>
    </div>
</body>

Answer 1

IMO如果您可以使用移动网站的文字进行操作，我就不会加载图片。这只是您可以做的一个例子

直播示例：

http://jsfiddle.net/G4KLe/14/

HTML：

<div id="image">
    <img src="http://m.incrediblebats.com/images/header.jpg" alt="Incredible Bats"/>
</div>
<br />
<div id="css">
    <div id="ib">INCREDIBLE BATS</div>
</div>

CSS：

#ib {
    font-size:30px;
    font-weight:bolder;
    font-family:"Times New Roman",Georgia,Serif;
    font:arial, helvetica;
    color: #7b8ec9;
    background-color:#000;
    text-align: center;

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1))); 
}

标题div中的图像抛出按钮（jquery mobile）

1 个答案: