#html #css #internet-explorer
#HTML #css #internet-explorer
Вопрос:
У меня есть некоторый HTML, где внутри тега href есть теги img для использования в качестве кнопки. Все работает нормально, за исключением того, что когда я открываю его в IE, я получаю границу вокруг тега img.
Вот некоторый код:
<a href="javascript:changecolor(1)" title="Click Again to Change Color" style="cursor:pointer; text-decoration:none"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(2)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(3)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(4)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(7)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(6)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px; text-decoration:none" /></a>
Как я могу избавиться от синей границы, которая появляется только в IE?
Ответ №1:
Простое исправление, в вашей таблице стилей создайте стиль, подобный этому:
a img{
border:0;
}
В вашем случае вы могли бы обновить свой стиль, чтобы включить некоторые из встроенных стилей, которые у вас есть в вашем HTML. Например, ваша таблица стилей будет обновлена до:
a{
cursor:pointer;
text-decoration:none
}
a img{
margin-top:600px;
}
Комментарии:
1. это отлично сработало, однако у меня снова возникла еще одна небольшая проблема, только в IE, на некоторых моих изображениях установлены верхние поля, и когда я нажимаю на них, появляется серое полосатое поле вокруг размера поля, когда я нажимаю на него, есть идеи, как это удалить?
2. Похоже, что это может быть изменение цвета JS, которое вы реализуете. Попробуйте удалить margin-top из img и применить вместо этого к тегу a. Если это не сработает — можете ли вы предоставить прямую ссылку или снимок экрана?
3. Возможно, вам придется добавить стиль ‘display:inline-block’ в класс ‘a’, чтобы заставить его также распознавать поля.
4. @user541597, если этот ответ отлично сработал, вы можете проверить его как принятый ответ. Это подскажет другим пользователям, что им не нужно пытаться решить вашу проблему. Что касается вашего другого вопроса, вы получите наилучшие результаты, задав его как новый вопрос.
5. Как сказал @amccormack, возможно, вам было бы лучше пометить этот ответ как правильный, если он сработал для вас, а затем опубликовать другой вопрос для нового сбоя — таким образом, у вас будет более широкая аудитория, которая поможет с этой последней проблемой.
Ответ №2:
Добавьте атрибут border=»0″ к тегу img
Ответ №3:
Что касается незначительной проблемы с Internet Explorer и серого поля вокруг тега привязки — это схема. Чтобы скрыть рамку с контуром, вы можете использовать следующий CSS:
a img{outline:none;}