링크 된 이미지에서 Safari 밑줄 텍스트를 중지하려면 어떻게합니까?

Question

내 사이트의 텍스트에 연결된 이미지가 있습니다. 텍스트는 링크처럼 보이고 이미지 위에 마우스를 가져 가면 화면의 고정 된 위치에 아래에 텍스트가 나타납니다. 이미지 밑의 텍스트를 밑줄이없는 일반 텍스트로 표시합니다. IE9, Chrome 및 Firefox에서는 작동하지만 Safari에서는 작동하지 않습니다. 텍스트 링크에 ​​대한 HTML은 다음과 같다 : -

<p><a class="thumbnail" href="#thumb">Basil Thomas Stirratt<span><img src="images/basil  stirrat.jpg" width="200" height="299" alt="" /><br />Basil Thomas Stirratt<br />taken June 1940</span></a>, who was 18 at the time, had been......</p> 

는 CSS는 다음과 같다 : -

.thumbnail{ 
background-color:#FFFF00; 
position:static; 
z-index: 0} 

.thumbnail:hover{ 
background-color:#CCCCCC; 
z-index: 50} 

.thumbnail span{ /*CSS for enlarged image*/ 
position:fixed; 
background-color:#99CCFF; 
padding:5px; 
left: -1000px; 
border: 10px ridge #E0E0E0; 
visibility: hidden; 
text-decoration:none; 
text-indent:0px; 
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
color:#000000; 
text-align:center; 
-moz-box-shadow: 3px 3px 8px #333333; 
-webkit-box-shadow: 3px 3px 8px #333333; 
box-shadow: 3px 3px 8px #333333;} 

.thumbnail span img{ /*CSS for enlarged image*/ 
border-width: 0; 
padding: 2px;} 

내가 문제를 보여주기 위해 이미지를 게시하도록 허용하지 않는 것 이상하게. 이 이미지가 어떻게 표시되는지 보려면 내 웹 사이트 ([1] : http://www.wellingtont2905.co.uk/story.html)를 확인하고 강조 표시된 노란색 텍스트를 찾아 커서를 그 위에 올려 놓습니다.

Safari에서이 작업을 중단하는 방법에 대한 제안이 있으십니까?

Answer 1

문제를 정렬했습니다. 그것은 필자의 본문에 밑줄이 그어져있는 정상적인 링크와 관련이있다. 해결책은 링크를 진한 파란색으로 만들고, 팝업 이미지의 배경을 동일한 파란색으로 변경 한 다음 이미지 아래의 텍스트 색상을 흰색으로 변경하는 것입니다. 즉, 텍스트는 여전히 밑줄이 그어져 있지만 배경과 같은 색상이므로 밑줄을 볼 수 없습니다. 그것은 나를 위해 일한다 !!