图像按钮周围的空白html

我有一个固定的导航栏在botton这个网页;我正在使用图像按钮。白色空间继续出现，按钮周围，我不能消除它：图像按钮周围的空白html

<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

来源

2013-07-31 user1518003

可能重复[删除下面的图像的白色空间（http://stackoverflow.com/questions/7774814/remove-white-space-below-image） –

我不知道这是否会总是正确渲染。在Amaya，我有问题显示。我认为你可能有一些基本的格式错误。 – Paul

由于某些原因，问题似乎与活动链接有关。 – Paul

好了，所以我并不完全相信你的问题，但我没有找到你的代码引起的白色空间的问题。

问题：

白色空间是由脚本引起的： 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，如果你想这显示如非移动设备上预期的那样。有各种方法可以尝试检测是否正在使用移动浏览器。

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

StackOverflow question regarding mobile-only script loading.

来源

2013-07-31 05:14:13 Paul

使用CSS来解决它：

img{ 
border: none; 
}

来源

2013-07-31 04:02:06 AxelPAL

我在上面添加了这些编辑，但没有任何更改。 – user1518003

图像被视为一个字符。只需将CSS属性显示设置为正确填充100％宽度/高度即可。

img { display: block; }

来源

2013-07-31 04:04:39

我在上面添加了这些编辑，但没有任何更改。 – user1518003

您可能想链接到您的页面，因为我们无法在没有图像的情况下重新创建问题。 –

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

img{ 
    display: block; 
    float:left; 
}

来源

2013-07-31 04:10:27

我增加了编辑仍然没有运气。往上看 – user1518003

图像按钮周围的空白html

回答

相关问题