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

Я пытаюсь избавиться от тонкой границы, которая появляется для каждого изображения в 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; } 
 

Dashboard

См. Прилагаемый скриншот:

Скриншот

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

 border-style: none; 

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

  

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

  • Используйте

    вместо элемента (эффективно создавая элемент с фоновым изображением – все, что вы делаете, тэг действительно не используется)

  • Если вы хотите / нуждаетесь в используйте решение Randy King ниже
  • Определить изображение src

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

Допустим, у вас есть образ «download-button-102×86.png» размером 102×86 пикселей. В большинстве браузеров вы зарезервируете этот размер по своей ширине и высоте, но 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; } 

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

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

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

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

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

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

 .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%; } 

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

Поверните это: Хромированная пограничная ошибка

В этом: Исправлена ​​ошибка Chrome

Мне понравилось решение Рэнди Кинга в том, что хром игнорирует стиль «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, чтобы закрыть его с помощью «”, иначе форматирование будет выглядеть фанки.

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

  

В тэге img src добавьте border = “0”, например, согласно объяснению @Amareswar выше

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

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

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

inline css

  

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

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

Я исправляю его, используя стиль прокладки:

 #picture { background: url("../images/image.png") no-repeat; background-size: 100%; } .icon { height: 30px; width: 30px; padding: 15px; } 

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

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

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

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

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

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

  
Давайте будем гением компьютера.