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

【问题标题】：Image in header div throwing off buttons (jquery mobile)标题 div 中的图像抛出按钮（jquery mobile）
【发布时间】：2011-07-19 20:01:44
【问题描述】：

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

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

在我的移动网站m.incrediblebats.com 上，标题中有一张图片。问题是当我使用本机 Android 浏览器（尚未在其他浏览器应用程序上尝试过）时，我触摸的按钮确实会转到正确的页面，但是当你触摸它时应该在按钮周围的突出显示在按钮。

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

img 在标题 div 中
div 包裹的 img header div
在 css 文件中应用了 background-img 和 height 样式的 div

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

我在想标题 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>

【问题讨论】：

你应该回答你自己的问题并接受它作为答案

标签： jquery mobile jquery-mobile

【解决方案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))); 
}

【讨论】：