IE11 не поддерживает несоразмерный размер фона

Я пытаюсь получить фоновый рисунок .jpeg для автоматического масштабирования до высоты DIV (держателя строки), независимо от количества дочерних DIV (держателя ссылки) - и в то же время, когда некоторый текст выравнивается по вертикали внутри родительского DIV.

Код работает на 100% в Chrome и Firefox, но IE11 полностью игнорирует размер фона.

Моя разметка HTML выглядит так:

<div id="active-container" class="ac1">
<div id="lineholder" style= "background-image: url(....); background-repeat: no-repeat; background-size: 44px 100%;">

<div id="text">
TEST
</div>

<div id="linkholder">
</div>

<div id="linkholder">
</div>

</div>
</div>

CSS:

#active-container {
min-width : 240px;
min-height : 26px;
height : auto;
float : left;
}

#lineholder {
position : relative;
min-width : 240px;
height : auto;
overflow : hidden;
}

#text {
position : absolute;
top : 50%;
margin : -13px 0 0 0;
width : 45px;
height : 26px;
left : 0px;
font-size : 8px;
font-weight : bold;
line-height : 26px;
}

#linkholder {
margin-left : 45px;
min-height : 26px;
width : 190px;
position : relative;
}

IE11 просто показывает исходное фоновое изображение в верхнем левом углу моего держателя строки, в то время как все остальные браузеры увеличивают высоту, чтобы соответствовать DIV.

См. Изображение здесь http://6710.sunnysite.dk/background-size_debug.jpg

CSS-фоновое изображение находится внутри html из-за необходимости вставлять больше отдельных строк с разными фоновыми изображениями человеком, который вообще знает HTML CSS;) Так что разные классы и т. Д. Не подходят.


html css internet-explorer-11 background-size
person Ulrik Pedersen    schedule 25.09.2014    source источник
comment
Думаю, это дубликат этого: stackoverflow.com/questions/22615336/   -  person Goos van den Bekerom    schedule 25.09.2014
comment
ты можешь найти там свой ответ   -  person Goos van den Bekerom    schedule 25.09.2014
comment
IE не масштабируется - ширина фона также должна быть установлена ​​на 44 пикселя, чтобы не все было одинаково;)   -  person Ulrik Pedersen    schedule 25.09.2014
comment
Просто добавил ссылку на иллюстрацию   -  person Ulrik Pedersen    schedule 25.09.2014

Ответы (3)


arrow_upward
1
arrow_downward

Проблема заключалась не в CSS или способе отображения IE (ну, не напрямую).

Код находился в общей сетевой папке. По совпадению я скопировал его на свой рабочий стол, и он сработал.

Проблема описана и дан ответ в этой теме - IE некорректно отображает CSS, когда сайт находится на сетевом диске

person Ulrik Pedersen    schedule 25.09.2014

arrow_upward
0
arrow_downward

У меня такое чувство, что это из-за смешивания пикселей с процентами.

background-size: 44px 100%;

Я знаю, что Safari очень тяжело с этим справляется (хотя недавно они устранили немало этих проблем). Можно только предположить, что IE имеет такие же или похожие проблемы, когда дело доходит до этого.

Если вам нужно убедиться, что фоновое изображение 44 пикселя в высоту и 100% ширину, вам нужно создать обертку вокруг него и установить высоту обертки как 44 пикселя. Затем используйте стандартный размер фона. (содержать, покрывать, 100% и т. д.)

person KernelCurry    schedule 25.09.2014
comment
Я слышал, вы говорите, что мне нужно поместить свой контент в другие DIV, чтобы решить эту проблему. Я дам ему попробовать. Причиной может быть процент пикселей, но использование только процентов тоже не работает. (18% 100%) - person Ulrik Pedersen; 25.09.2014
comment
Нет, нет, у вас уже есть это в Div, вам просто нужно установить высоту #lineholder на 44px, а затем изменить размер фона на 'contain' или 'cover' - person KernelCurry; 25.09.2014
comment
Это ширина, которая должна быть 44 пикселя, чтобы фон остановился, прежде чем он начнет скрывать дочерние элементы с левым полем 45 пикселей ???? тогда высота должна составлять 100% в зависимости от того, сколько дочерних элементов содержит DIV. - person Ulrik Pedersen; 25.09.2014
comment
Это действительно странно !! Просто переместили проект с сетевого диска на локальный - и он отрисовывается идеально! То же самое, если я загружаю на веб-сервер. Единственный раз, когда он терпит неудачу, - это когда он загружается в IE из сетевого местоположения ... К сожалению, проект предназначен для запуска из сетевого местоположения: / - person Ulrik Pedersen; 25.09.2014

arrow_upward
0
arrow_downward

  • I used the svg icon as a background image, through a pseudo-element.
    • I had a problem with background-size: contain; in IE-11.
    • Ширина и высота фонового изображения задаются в CSS.

Заменил на background-size: 97% 97%; Теперь все в норме.

Пример:

&:before {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 97% 97%;
  background-image: url(../img/icons/add-to-package.svg);
  content: "";
  height: 2.143rem;
  left: 1.429rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.143rem;
}

До свидания.

person Alexandr Kazakov    schedule 12.05.2018