이미지 위에 버튼이있는 링크를 얻고 싶습니다.이미지 위에 선이있는 배경
I did, 실제로 사용하는 CSS :
다음section a:link, section a:visited {
width: 150px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;
color: white;
background: #03c;
padding: 10px 10px 10px 60px;
display: block;
text-decoration: none;
}
section div {
margin-left: 5px;
margin-top: -9px;
width: 50px;
height: 50px;
float: left;
}
.pdf div {
background: transparent url('pdf.png') no-repeat 0 50%;
}
HTML :
<section class="pdf">
<div></div>
<a href="#">Sheet music (PDF)</a>
</section>
그러나 부정적인 마진 that don't work in IE7를 사용하는 것보다 더 나은 솔루션이 아닌가요? 나는 어떤 margin-top
을 section a
태그에 넣으려고했으나, 여백이 무너져서 작동하지 않았다.
(와우, 내 평판은 나 이미지를 포함하거나 2 개 이상의 외부 링크를 추가하는 것을 허용하지 않았다.)
귀하의 테스트 케이스는 IE9에서 <'section' 작품으로 HTML5 의미 요소를 만들기 위해 필요 http://code.google.com/p/html5shiv/를 포함하지 않는 span 태그에 있습니다. – thirtydot