#html #css #internet-explorer
#HTML #css #internet-explorer
Вопрос:
У меня есть ссылка (фрагмент), и я пытаюсь добавить к ней положение фонового изображения в качестве значка, чтобы мне понравилось в этом фрагменте :
.page {
color: #ffffff;
height: 75vh;
min-height: 850px;
padding-bottom: 0;
}
.page ul.col-2 {
height: 100%;
padding: 0;
font-size: 0;
position: relative;
background-color: #f49841;
}
.page ul.col-2 li {
height: 100%;
width: 50%;
display: inline-block;
font-size: 12px;
vertical-align: top;
overflow: hidden;
position: relative;
}
.page ul.col-2 li ul.line-2 {
padding: 0;
height: 100%;
}
.page ul.col-2 li ul.line-2 li {
list-style: none;
vertical-align: top;
width: 100%;
}
.page ul.col-2 li ul.line-2 li:nth-child(1) {
background-color: #4286f4;
height: 30%;
}
.page ul.col-2 li ul.line-2 li:nth-child(2) {
height: 70%;
}
.page ul.col-2 li ul.line-2 li ul.col-2 {
padding: 0;
}
.page ul.col-2 li ul.line-2 li ul.col-2 li {
height: 100%;
width: 50%;
display: inline-block;
vertical-align: top;
}
.page ul.col-2 li ul.line-2 li ul.col-2 li:nth-child(1) {
background-color: #40ed48;
}
.page ul.col-2 li ul.line-2 li ul.col-2 li:nth-child(2) {
background-color: #ed3f3f;
}
.page ul.col-2 li ul.line-2 li .my-link {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/16/Deletion_icon.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: right;
padding-right: 30px;
color: inherit;
text-decoration: none;
} <div class="page">
<ul class="col-2">
<li>
<div class="text-1">
text 1
</div>
</li>
<li>
<ul class="line-2">
<li>
<div class="box-text">
<a class="my-link">My link</a>
</div>
</li>
<li>
<ul class="col-2">
<li>
text 2
</li>
<li>
text 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div> Это работает везде, кроме IE. Я пытаюсь изменить положение или отображение. Но ничто не дает ожидаемого результата.
=== РЕДАКТИРОВАТЬ ===
Я просто проверяю, и, как ни странно, похоже, что это работает внутри фрагмента.
Я добавляю изображение моего кода
== ПРАВКА 2 ==
Я обновляю свой фрагмент кода, чтобы дать лучшее представление о том, что находится вокруг ссылки, но все равно даю хороший результат. Я присоединяюсь к изображению того, что появляется в моем env : 
Это просто выглядит так, как будто позиция фона всегда находится в центре, независимо от значения, которое я ввел.
Комментарии:
1. Проверьте элемент на предмет того, который не работает, и убедитесь, что все стили были скопированы во фрагмент — очевидно, вы что-то пропустили
2. Я проверяю, но разницы нет. Разница в том, что элемент link находится внутри другого div. Я пытаюсь подготовить другой фрагмент, но до сих пор результат во фрагменте всегда хороший.
Ответ №1:
Я просто перемещаю значок удаления css в :after элемент, и он отлично работает в IE11. Я надеюсь, что это поможет вам. Спасибо
.my-link {
color: inherit;
text-decoration: none;
}
.my-link:after {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/16/Deletion_icon.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: right;
padding-right: 30px;
content: '';
}
.my-link:hover {
color: red;
}
.my-link:hover::after {
background-image: url(https://cdn1.iconfinder.com/data/icons/warnings-and-dangers/400/Warning-02-512.png);
} <a class="my-link">My link</a> Комментарии:
1. Проблема в том, что при наведении курсора я хочу изменить изображение и цвет текста.
2. Не могли бы вы, пожалуйста, прояснить путаницу, связанную с тем, что у вас возникли проблемы с положением фона или с изменением цвета и изображения при наведении курсора мыши? Будет лучше, если вы сообщите обо всех своих проблемах в исходном сообщении, это может помочь нам лучше разобраться в проблеме. Спасибо за ваше понимание.
3. Я просто обновляю приведенный выше эффект наведения кода, надеюсь, это вам поможет. Спасибо
4. Моя проблема на самом деле связана с «фоновой позицией» (наведение работает хорошо, поэтому я не поместил это в свой пост, потому что там уже много информации). Хассан предлагает способ обойти проблему, и это работает. Итак, я приму его ответ, но я бы предпочел понять, почему фоновая позиция не работала в IE … иногда.