HTML 비주얼이 제대로 렌더링되지 않습니다.

여기 코드를 참조하십시오 .. JS Fiddle. 첫 번째 이미지 바로 다음에 파란색의 밑줄이 표시된다는 특이한 문제가 있습니다. 왜 이런 일이 일어나는 걸까요? href를 삭제하면 사라집니다. 매우 특이한 문제. 무엇을해야합니까?HTML 비주얼이 제대로 렌더링되지 않습니다.

HTML :

<body> 
    <div id="top-bar"> 
     <a target="_blank" href="https://twitter.com/x"> 
      <img class="twitter" src="images/twitter.png"> 
     </a> 
     <a target="_blank"> 
      <img class="twitter" src="images/twitter.png"> 
     </a> 
     <a target="_blank" href="https://www.facebook.com/x"> 
      <img id="fb" src="images/fb.png" 
       onmouseover="this.src='images/fb-hover.png'" 
       onmouseout="this.src='images/fb.png'"> 
     </a> 

    </div> 
</body>

CSS :

당신의 a 태그 내부에 빈의

#top-bar { 
    height: 50px; 
    min-height: 50px; 
    max-height: 50px; 
    background-color: #166330; 
} 
body { 
    margin: 0; 
    padding: 0; 
    background-image: url(images/bg.png); 
    background-size: 100%; 
    color: white; 
} 
.twitter { 
    margin-left: 30px; 
    margin-top: 10px; 
    margin-right: 10px; 
    min-height: 30px; 
    min-width: 30px; 
    max-height: 30px; 
    max-width: 30px; 
} 
#fb { 
    min-height: 30px; 
    min-width: 30px; 
    max-height: 30px; 
    max-width: 30px; 
}

출처

2014-07-13 Vinay Chandra

두 가지 방법이 있습니다.

1] <a><img/>과 </a> 태그 사이에서 모두 white spaces을 제거하십시오.

2] <a> 요소에 text-decoration:none;을 추가하십시오.

출처

2014-07-13 08:59:46 AdityaParab

+1, 특히 옵션 2 – redditor

이렇게 공백없이 쓰면 "밑줄"이 표시되지 않습니다. 예 : 같은 :

<a target="_blank" href="https://twitter.com/x"><img class="twitter" 
    src="images/twitter.png"></a>

는 그래서 "밑줄"실제로 빈 텍스트 링크입니다 브라우저는 텍스트 그냥 공백 경우에도, 밑줄 링크를 표시합니다.

출처

2014-07-13 08:53:39

그렇다면'# fb '이 제대로 렌더링되는 이유는 무엇입니까? –

간단한 .. 그냥이

a{ 
    text-decoration:none; 
}

출처

2014-07-13 08:56:33 Virat21

사용자 스타일 = 사용 태그에 "텍스트 장식 없음을"A

<a style="text-decoration:none" href=....

출처

2014-07-13 08:57:13

HTML 비주얼이 제대로 렌더링되지 않습니다.

답변

관련 문제