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

Question

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

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

Answer 1

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

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

Таким образом, вы обманываете Chrome, думая, что там ничего нет - размер 0px на 0px, но с точно нужным количеством «отступов» для кнопки. Вот блок идентификатора CSS, который я использую для достижения этой цели ...

#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.

Answer 2

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

border-style: none;

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

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

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

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

Answer 3

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

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

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

Answer 4

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

Answer 5

Если вы пытаетесь исправить ошибку Chrome при загрузке изображений, но вы ТАКЖЕ хотите, чтобы ваше изображение-заполнитель использовалось для загрузки (например, с отложенной загрузкой изображений), используйте этот прием:

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

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

Включите это:

В это:

Answer 6

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

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

Answer 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, чтобы закрыть его знаком "", иначе форматирование будет выглядеть странно.

Answer 8

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

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

Answer 9

встроенный css

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

Answer 10

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

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

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