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

Ответ 1

Вместо border: none; или border: 0; в вашем CSS вы должны:

border-style: none;

Вы также можете поместить это в тег изображения так:

<img src="blah" style="border-style: none;">

Либо будет работать, если изображение не имеет src. Вышеуказанное относится к тем неприятным границам ссылок, которые появляются в некоторых браузерах, где границы отказываются играть хорошо. Тонкая граница, которая появляется, когда нет src, заключается в том, что хром показывает, что на самом деле в пространстве, которое вы определили, нет изображения. Если у вас возникла проблема, попробуйте выполнить одно из следующих действий:

• Используйте <div> вместо элемента <img> (эффективно создавая элемент с фоновым изображением - все, что вы делаете, тэг <img> действительно не используется)
• Если вы хотите/нуждаетесь в теге <img>, используйте решение Randy King ниже
• Определить изображение src

Ответ 2

Это ошибка Chrome, игнорирующая "border: none"; стиль.

Скажем, у вас есть образ "download-button-102x86.png" размером 102x86 пикселей. В большинстве браузеров вы зарезервируете этот размер по своей ширине и высоте, но Chrome просто рисует границу там, независимо от того, что вы делаете.

Итак, вы обманываете Chrome, думая, что там ничего нет - размер 0px на 0px, но с правильным количеством "отступов" для кнопки. Вот блок CSS id, который я использую для выполнения этого...

#dlbutn {
    display:block;
    width:0px;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

Voila! Работает повсюду и избавляется от контура/границы в Chrome.

Ответ 3

Для тех, кто хочет избавиться от границы, когда src пуст или нет src, просто используйте этот стиль:

IMG[src=''], IMG:not([src])      {opacity:0;}

Он полностью скроет тег IMG, пока вы не добавите src

Ответ 4

Добавить атрибут border = "0" в теге img

Ответ 5

Если u не определил src или атрибут src пуст в теге img, большинство браузеров создадут границу. Чтобы исправить это, используйте прозрачное изображение как src:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">

Ответ 6

Если вы пытаетесь исправить ошибку Chrome при загрузке изображений, но вы также хотите, чтобы изображение вашего заполнителя загружалось (например, с помощью Lazy Загрузка изображений), можно сделать этот трюк:

.container { overflow: hidden; height: 200px; width: 200px }

.container img { width: 100%; height: 100% }

.container img[src=''],
.container img:not([src]) {
  width: 102%;
  height: 102%;
  margin: -1%;
}

Это приведет к тому, что граница будет скрыта в переполнении контейнера, и вы ее не увидите.

Поверните это:

В это:

Ответ 7

Мне понравилось решение Рэнди Кинга в том, что хром игнорирует стиль "border: none", но его немного сложно понять, и он не работает в браузерах ie6 и старше. Взяв его пример, вы можете сделать это:

CSS

ins.noborder
{
    display:block;
    width:102px;
    height:86px;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

HTML

<ins class="noborder"></ins>

Убедитесь, что когда вы используете тег ins, чтобы закрыть его с помощью "", или форматирование будет выглядеть фанк.

Ответ 8

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

Ответ 9

с использованием border = "0" является аффективным способом, но вам нужно будет добавить этот атрибут для каждого изображения.

Я использовал следующий jQuery, чтобы добавить этот атрибут для каждого изображения, так как я ненавижу эти контуры и граничит с изображениями.

$(document).ready(function () {
        $('img').each(function () {
            $(this).attr("border", "0");
        });
    });

Ответ 10

inline css

<img src="logo.png" style="border-style: none"/>

Ответ 11

Вы можете удалить границу, установив текст-отступ на очень большое число, но и изображение тоже исчезнет. Попробуйте это

img:not([src]) {
    text-indent: 99999px !important;
}

Ответ 12

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

Ответ 13

то же, что и для @aaron-encoding и @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;
}

Ответ 14

Я исправлю его с помощью стиля прокладки:

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

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

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

Ответ 15

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

img.logo
{
    display:block;
    width:100%;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
}

Ответ 16

решение состоит в том, чтобы установить стиль контура в нет (то есть) контур: нет, он работает со мной

Ответ 17

Сначала создайте изображение PNG прозрачного типа с фотошопом в мини-размере. Затем в своем классе, пожалуйста, добавьте:

content:url("url of your blank png");

Ответ 18

Это происходит потому, что вы используете тег 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>