Удаление границы изображения в Chrome / IE9 - PullRequest
Новая
       112

Удаление границы изображения в Chrome / IE9

50 голосов
/ 16 мая 2011

Я пытаюсь избавиться от тонкой границы, которая появляется для каждого изображения в Chrome и IE9.У меня есть этот CSS: 

outline: none;
border: none;

Используя jQuery, я также добавил атрибут border=0 для каждого тега изображения.Но граница, как показано на изображении, все еще появляется.Любое решение? 

body {
    font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
    outline: none;
    border: none;
}
.icon {
    width: 16px;
    height: 16px;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: -48px -144px;
    background-image: url(theme/images/ui-icons_0078ae_256x240.png);
    margin-right: 2px;
    display: inline-block;
    position: relative;
    top: 3px;
}
<h1>Dashboard <img class="icon" border="0"></h1>

См. Скриншот:

Screenshot

Ответы [ 16 ]

1 голос
/ 16 мая 2011

В вашем теге img src добавьте border = "0", например, <img src="img.jpg" border="0"> в соответствии с объяснением @Amareswar выше

0 голосов
/ 27 мая 2018

у меня сработало.Потребовались дни, которые сводили меня с ума. 

img.logo
{
    display:block;
    width:100%;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
}
0 голосов
/ 06 ноября 2016

Я исправляю это, используя стиль заполнения: 

#picture {
    background: url("../images/image.png") no-repeat;
    background-size: 100%;
}

.icon {
    height: 30px;
    width: 30px;
    padding: 15px;
}

Граница исчезает, когда вы увеличиваете значение заполнения.Найдите свою ценность.

0 голосов
/ 04 марта 2016

То же, что и у @ aaron-coding и @ randy-king, но только более общий способ скрыть границу изображения перед его загрузкой (т. Е. С lazy-load.js или чем-то

(очевидно, я не могу сделать блок кода в моем исходном комментарии) 

.lazy-load-borderFix {
  display: block;
  width: 1px !important;
  height: 1px !important;
  outline: none;
  padding: 0px;
  margin: -4px;
  background-image:none !important;
  background-repeat:no-repeat;
}
0 голосов
/ 10 сентября 2015

Это происходит потому, что вы используете тег img без атрибута src. Решение состоит в том, чтобы поместить изображение в div. Примерно так: 

<style>
         div#uno{
            display:block;
            width: 351px;
            height: 500px;
            background: url(especificaciones1.png) no-repeat;

         }
         div#dos{
            display:block;
            width: 612px;
            height: 500px;
            background: url(especificaciones2.png) no-repeat;
         }

</style>
<div class="especificaciones">
   <div id="uno" class="imag1"></div>
   <div id="dos" class="imag2"></div>
</div>
0 голосов
/ 04 марта 2014

У меня была похожая проблема при отображении .png-изображения в теге div.Тонкая (я думаю, 1 пиксель) черная линия была нарисована сбоку изображения.Чтобы это исправить, мне пришлось добавить следующий стиль CSS: box-shadow: none;

Страница:
...