Question

我的网页上有一个固定的导航栏;我正在使用图像按钮。按钮周围仍然出现白色空间，我无法消除它：

<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>

以下是图片： enter image description here

enter image description here

Answer 1

使用CSS解决它：

img{
border: none;
}

Answer 2

图片被视为一个角色。只需将CSS属性显示设置为阻止以正确填充100％宽度/高度。

img { display: block; }

Answer 3

使用此css解决此错误 -

img{
   display: block;
   float:left;
 }

Answer 4

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

问题：

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

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

<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 question regarding mobile-only script loading.

图像按钮html周围的白色空间

4 个答案: