1

我有这个网页，底部有一个固定的导航栏；我正在使用图像按钮。按钮周围继续出现空白，我无法消除它：

<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">
    </script>
    <style>
        img {
        border: none;
        display: block;
        float:left;
        }
    </style>
</head>
<body>   
<div id="ider" data-position="fixed" data-role="navbar" class="ui-navbar" role="navigation">
    <ul class="ui-grid-b">
        <li class="ui-block-a">
            <a href="index.html"><img style="width:100%; height:100%" src="icon1.png"></a>
        </li>
        <li class="ui-block-b">
            <a href="index.html"><img style="width:100%; height:100%" src="icon2.png"></a>
        </li>
        <li class="ui-block-c">
            <a href="index.html"><img style="width:100%; height:100%" src="icon3.png"></a>
        </li>
</ul>
</div>       
</body>

以下是图片： 在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

4

4 回答 4

0

使用 CSS 来解决它：

img{
border: none;
}
于 2013-07-31T04:02:06.913 回答
0

图像被视为字符。只需将 CSS 属性 display 设置为 block 以正确填充 100% 宽度/高度。

img { display: block; }
于 2013-07-31T04:04:39.103 回答
0

使用这个 css 来解决这个错误 -

img{
   display: block;
   float:left;
 }
于 2013-07-31T04:10:27.780 回答
0

好的，所以我不完全确定您的问题，但我确实发现您的代码存在导致空白的问题。

问题：

空白是由脚本引起的： http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js

它所做的是，它在图像周围的活动链接内创建两个不同的跨度标签。那就是白色空间！

<span class="ui-btn-inner"><span class="ui-btn-text"><img style="width:100%; height:100%" src="icon2.png"></span></span>

您可以通过右键单击 Chrome 中的网页并单击“检查元素”来亲自查看此内容。这些跨度导致图像周围似乎有一个空白区域。（我假设活动链接是跨度的，而不是链接，所以看起来图像本身有空白。）

解决方案：

http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js如果您希望它在非移动设备上按预期显示，则必须删除。有多种方法可以尝试检测是否正在使用移动浏览器。

如果您必须运行该脚本，可能的解决方法可能是让 div 的背景颜色与图像匹配。可以使用 CSS 操作跨度，尽管运行麻烦的脚本也可能会导致问题（甚至可能无法按预期工作）。

StackOverflow 关于移动端脚本加载的问题。

于 2013-07-31T05:14:13.127 回答