Pytanie calc () zawiesza IE 9, gdy ustawiony jest w położeniu tła


używam calc () aby umieścić obraz 10px z prawej strony czułego pojemnika. Mam taką deklarację:

background-position: calc(100% - 10px) 6px;

Ilekroć próbuję:

  • załaduj ten CSS na stronę normalnie lub
  • wprowadź go za pomocą Narzędzi dla programistów

IE 9 całkowicie się zawiesza. Brak błędów w Narzędziach dla programistów, po prostu po awarii. Działa to we wszystkich innych (przyszłych) przeglądarkach, ale moim celem jest również wsparcie dla IE 9.

calc() wydaje się działać na innych właściwościach, takich jak margin i width w porządku. Oto pełny ślad CSS powiązanego elementu:

enter image description here

Tutaj jest ustawiony na 98%, ale kiedy używam calc na background-position-x (jak pokazano powyżej) IE 9 ulega awarii.

Dziękuję Ci!


11
2018-01-09 17:05


pochodzenie


Tylko strzał w ciemno, ale spróbuj background-position: calc(100% - 10px) calc(6px + 0);. - MikesBarto2002


Odpowiedzi:


Jako alternatywa dla calc(), możesz użyć top/right/bottom/left słowa kluczowe, aby określić różne krawędzie (a nie domyślną lewą górą), z których można zrównoważyć zawartość tła.

background-position: right 10px top 6px; /* 10px from the right, 6px from the top */

http://www.w3.org/TR/css3-background/#the-background-position

Jeśli podane są dwie wartości ... pierwsza reprezentuje pozycję poziomą ... druga przedstawia pion. ... Wartości reprezentują przesunięcie lewego górnego rogu obrazu tła z lewego górnego rogu obszaru ustawiania tła.

Jeśli podane są cztery wartości, każda reprezentuje przesunięcie i musi być poprzedzona znakiem a słowo kluczowe określające, z której krawędzi pochodzi przesunięcie.

Jeśli wolisz calc() ale chcesz zapobiec awariom starszych przeglądarek, możesz zdefiniować wartość rezerwową (calc() jest Nieobsługiwany dla background-position w IE9-).

background-position-x: 98%;
background-position-y: 6px;
background-position: calc(100% - 10px) 6px; 

8
2017-07-01 07:13





Coś w tym miejscu w ciemności. Ale może spróbuj:

background-position: expression(100% - 10px) 6px;

FYI: Nie mam dużego doświadczenia z ekspresją (). Używałem go jednak w przeszłości do osiągnięcia podobnego celu w przeglądarce mobilnej. Może to zadziała dla Ciebie w IE.


1
2018-01-25 00:12





Znalazłem ten artykuł Pozycjonowanie tła w prawym dolnym rogu elementu 

Zatem rozwiązanie twojego problemu będzie wyglądało tak:

background-position: 6px right 10px;

0
2018-06-30 19:30





Zamiast używać wyrażenia calc lub wyrażenia, dla mnie działało użycie elementów pozycjonowanych bezwzględnie i rozciąganie obrazów za pomocą właściwości lewej i prawej.

.bg_img{
  position:absolute;
  top:0;
  bottom:0;
  left:-10px;
  right:-10px;
}

Piksele ujemne w większości przypadków nie są konieczne, ale dla mnie to właśnie próbowałem osiągnąć za pomocą funkcji calc ().

Mam nadzieję, że to pomoże komuś!


0
2018-04-10 16:58