圖像按鈕周圍的空白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

回答

相關問題