1
У меня есть список, где я использую спрайты CSS для справки. Проблема, с которой я столкнулась, заключалась в том, что я хочу дополнять спрайт без необходимости возвращаться и воссоздавать все мои изображения. Единственный способ заставить его работать правильно - это использовать div для фактического спрайта, иначе прокладка заставит другую половину спрайта быть видимой.CSS Sprites Inside Padded Elements
Проблема в том, что это не W3C. А div не может быть в li, по крайней мере это не должно.
<div id="social-bar">
<ul id="social-links">
<li>
<a href="http://twitter.com" title="Twitter">
<div class="sprite twitter">Twitter</div>
</a>
</li>
<li>
<a href="http://facebook.com" title="Facebook">
<div class="facebook sprite">Facebook</div>
</a>
</li>
<li>
<a href="http://instagram.com" title="Instagram">
<div class="instagram sprite">Instagram</div>
</a>
</li>
<li>
<a href="http://www.youtube.com" title="YouTube">
<div class="youtube sprite">YouTube</div>
</a>
</li>
</ul>
</div>
#social-bar {
/*margin-left:auto;*/
/*margin-right:auto;*/
width:100%;
text-align:center;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 5px;
/*background-color:#f9f9f9;*/
/*border-top: 1px solid #f9f9f9;*/
/*border-bottom: 1px solid #f9f9f9;*/
}
#social-links {
list-style-type: none;
margin: 0px;
padding: 0px;
text-indent:0px;
width:100%;
}
#social-links li {
display:inline-block;
width:54px;
height:54px;
margin-left:20px;
margin-right:20px;
/*padding:8px;*/
/*border: 4px solid #f9f9f9;*/
border: 4px solid #dadada;
}
#social-links a {
display:block;
width:100%;
height:100%;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
position:relative;
overflow:hidden;
}
#social-links a:hover {
background-color:#ff379f;
}
#social-links img {
padding-top:8px;
}
.sprite {
width:100%;
height:0px;
padding-top:38px;
overflow:hidden;
background-repeat:no-repeat;
position:relative;
float:left;
display:block;
font-size:0px;
line-height:0px;
}
.sprite.twitter {
background-image:url(/images/social/twitter-sprite.png);
margin-top:8px;
background-position: 4px 0px;
}
#social-links a:hover .sprite.twitter {
background-position: 4px -38px;
}
.sprite.facebook {
background-image:url(/images/social/facebook-sprite.png);
margin-top:8px;
background-position: 18px 0px;
}
#social-links a:hover .sprite.facebook {
background-position: 18px -38px;
}
.sprite.instagram {
background-image:url(/images/social/instagram-sprite.png);
margin-top:8px;
background-position: 8px 0px;
}
#social-links a:hover .sprite.instagram {
background-position: 8px -38px;
}
.sprite.youtube {
background-image:url(/images/social/youtube-sprite.png);
margin-top:8px;
background-position: 8px 0px;
}
#social-links a:hover .sprite.youtube {
background-position: 8px -38px;
}
.sprite.rss {
background-image:url(/images/social/rss-sprite.png);
margin-top:8px;
background-position: 8px 0px;
}
#social-links a:hover .sprite.rss {
background-position: 8px -38px;
}
Простыни и спрайты не идут хорошо вместе, к сожалению. Почему бы просто не сделать теги div тегов? – JoeyP
Я считаю, что 'div' разрешен в' li', согласно спецификации. Но не в 'a'. http://stackoverflow.com/questions/3011934/can-we-give-div-within-li Несмотря на это, я понимаю, что вы не захотите этого делать. – matthewpavkov
Поскольку у вас уже установлен '' '' block', просто сделайте 'div'' 'span' как @JoeyP, а затем сделайте' span' '' block'. Я не вижу способа обойти это. Альтернативой, конечно же, является просто изменение ваших спрайтов. – matthewpavkov