공백 주위의 이미지 버튼 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) –

나는이 의지가 있는지 확실하지 않습니다 항상 올바르게 렌더링됩니다. 나는 아마 야에 그것을 표시하는 데 문제가있었습니다. 기본 서식 오류가있을 수 있습니다. – 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>

당신은 크롬에서 웹 페이지를 마우스 오른쪽 버튼으로 클릭하여 자신이를보고 클릭하면 할 수 있습니다 "요소를 검사합니다." 이러한 범위로 인해 이미지 주위에 공백이있는 것처럼 보입니다. (I 활성 링크 스팬이 아닌 링크의 가정, 그래서 이미지 자체가 흰색 공간이 나타납니다.)

솔루션 :

이 표시 할 경우는 http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js를 제거해야 비 모바일 기기에서 의도 된대로. 모바일 브라우저의 사용 여부는 다양한 방법으로 감지 할 수 있습니다.

해당 스크립트를 실행해야하는 경우 가능한 해결 방법은 이미지와 일치하는 배경색을 가진 div를 사용하는 것입니다. 스크립트를 실행하면 문제가 발생할 수 있지만 의도 한대로 작동하지 않을 수도 있지만 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

이미지는 문자로 처리됩니다. 100 % 너비/높이를 제대로 채우기 위해 CSS 속성 표시를 차단하기 만하면됩니다.

img { display: block; }

출처

2013-07-31 04:04:39

위의 편집 내용을 변경없이 추가했습니다. – user1518003

이미지없이 문제를 재현 할 수 없기 때문에 귀하의 페이지에 링크하고 싶을 수도 있습니다. –

사용이 CSS는이 오류 해결 방법 -

img{ 
    display: block; 
    float:left; 
}

출처

2013-07-31 04:10:27

행운을 남긴 편집을 추가했습니다. 위 참조 – user1518003

답변

관련 문제