spysun
@spysun
web мастер

По непонятной причине в браузерах chrome, opera (web-kit) внутри изображения-ссылки образуется рамка белого цвета .Как её убрать?

border: 0; для a img - не работет
Эта рамка отображается только в web-kit браузерах . В firefox её нет.
отображение в chrome
a6a9d8cafd514acfa7a9827d5c2477d3.png
отображение в firefox
8b5972d4493a40088fa2618753211b35.PNG
  • Вопрос задан
  • 463 просмотра
Решения вопроса 1
fr_end
@fr_end
Frontend разработчик
Вы неправильно используете тег <img>. Из-за того, что не указан атрибут src, а картинка накладывается background'ом, и появляется эта рамка. Лучше используйте например тег <i></i>, определив в CSS для него
i {
display: inline-block;
}

Ну и не забывайте указывать размеры)
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
sergski
@sergski
web-developer
а что за repeat:none; ? background-repeat: no-repeat, а лучше background:url(/images/sp_office.jpg) 0 0 no-repeat;
Ответ написан
SKolt
@SKolt
https://www.instagram.com/seregamih/
Код можно как-нибудь увидеть? Мы же всё таки не телепаты :)
Ответ написан
codingal
@codingal
Front end и не только
Может рамка не у изображения а у блока поверх? "Офисный переезд" прямо на картинке находится или это отдельный блок?
Ответ написан
spysun
@spysun Автор вопроса
web мастер
.top_blocks {
width: 817px;
height: 279px;
background: url(/images/blocks_bg.png);
float: left;}
/*начало*/
.office {
width: 235px;
height: 277px;
float: left;
padding-left: 15px;
margin-right: 30px;
}

.office img{
background:url(/images/sp_office.jpg);
background-position:0px 0px;
width: 230px;
height: 86.5px;
display:block;
repeat:none;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.6);
}
.office img:hover{
background:url(/images/sp_office.jpg);
background-position:0px -86.5px;
width: 230px;
height: 86.5px;
display:block;
repeat:none;
border-radius: 10px;
}
.home {
width: 235px;
height: 277px;
float: left;
padding-left: 15px;
margin-right: 30px;
}
.home img{
background:url(/images/sp_house.jpg);
background-position:0px 0px;
width: 230px;
height: 86.5px;
display:block;
repeat:none;
padding-left: 15px;
margin-right: 30px;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.6);
}
.home img:hover{
background:url(/images/sp_house.jpg);
background-position:0px -86.5px;
width: 230px;
height: 86.5px;
display:block;
repeat:none;
border-radius: 10px;
}
.uslugi {
width: 230px;
height: 277px;
float: left;
padding-left: 15px;
}
.uslugi img{
width: 228px;
height: 86.5px;
margin-left: -10px;
margin-bottom: 16px;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.6);
background:url(/images/sp_uslugi.jpg);
background-position:0px 0px;
display:block;
repeat:none;
}
.uslugi img:hover{
background:url(/images/sp_uslugi.jpg);
background-position:0px -86.5px;
width: 228px;
height: 86.5px;
display:block;
repeat:none;
border-radius: 10px;
}

a img {
border: none;
}

/*окончание вставки*/

Это фрагмент кода css отвечающий за отображение блоков на картинке .
Сайт на Wordpress .
Фрагмент кода html для этого блока :

Ваш офис переезжает на новое место и вы хотите избавить себя от всех этих хлопот связанных с этим процессом? Вы обратились по адресу!Подробнее..
Вы переезжаете в другую квартиру, и вы хотите избавить себя от всех хлопот, связанных с этим процессом? Вы обратились по адресу!Подробнее..
— Сброка-разборка, мелкий ремонт мебели;
— Навес картин, жалюзи, карнизов, полок, зеркал, кухонных шкафов и т.д.Подробнее..

Спасибо!
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы