Границы рендеринга при использовании CSS Sprites - PullRequest
Новая
       6

Границы рендеринга при использовании CSS Sprites

1 голос
/ 06 февраля 2011

Я пытаюсь использовать CSS-спрайты, чтобы уменьшить количество HTTP-запросов на странице.Я хочу, чтобы эти изображения отображались без границ.

Насколько я могу судить, я правильно настроил CSS, но у меня возникают проблемы с рендерингом, указанные ниже (примечание: логотип Google намеренно обрезан):

image

Как видите, все браузеры по-прежнему отображают границы.Кроме того, IE и FireFox отображают также значки типа «неработающая ссылка».

HTML-код, используемый в этом примере: 

<html>
  <head>
    <style>
      img {border:none}
      img.css_sprite { background:url("http://www.google.com/images/nav_logo29.png") -20px -10px; height:24px;  width:100px; border:none;}
    </style>
  </head>
  <body>
    <img class="css_sprite"/>
  </body>
</html>

Может кто-нибудь сказать мне, что я делаю здесь неправильно?Я уверен, что это должно быть что-то простое.Заранее спасибо.

Ответы [ 2 ]

6 голосов
/ 06 февраля 2011

Граница относится к этому: 

<img class="css_sprite"/>

Это граница, нарисованная браузерами из-за отсутствующего изображения.Здесь вы не указываете src, поэтому браузеры вместо этого добавляют границу и отсутствующее графическое изображение.

Вместо img вместо этого укажите другой элемент, например div или span.

0 голосов
/ 13 февраля 2014

Я нашел отличное решение, просто поместив чистое прозрачное изображение (предпочтительно 1x1 png) в элементы src ... :), поскольку изображение прозрачно, оно вообще не будет видно src не исчезнет, ​​и ваша цель решена...

...