css funkcja calc błąd w IE

As @Joe podkreślił w swojej odpowiedzi, tutaj z IE problem nie ma nic wspólnego z zapytaniami mediów.

Dlatego zaktualizowałem stary tytuł: ("media zapytania GLITCH w IE") z aktualnym. (Również dzięki niektóre meta advice)

Wystarczy, aby mieć pewność, że stworzył nowy FIDDLE zawierająca tylko funkcję calc i niskie i oto - Widzę ten sam (złego) zachowanie w IE jak ja w moim oryginalne skrzypce z zapytania o media.

Również jedna interesująca obserwacja, którą zauważyłem, polegała na tym, że dzieje się tak tylko wtedy, gdy używam podziału w operacji Calc, ale jeśli używam czegoś prostszego, jak IE, to obsługa IE jest dobra.

Używam media queries uzasadnić listę pól.

Zasadniczo skonfigurowałem zapytanie o media dla każdego stanu #columns, gdzie następnie używam calc(), aby obliczyć margines prawy na każdym z elementów (z wyjątkiem tych w ostatniej kolumnie).

Oto fiddle

Teraz to działa dobrze w Chrome i Firefox - ale gdy uruchomię to w IE9 +

widzę glitch między państwami zapytania mediów (w tym migotanie i nieposłuszeństwo zapytaniami mediów).

Oto zrzut ekranu z tego, co mówię

[zrzut ekranu zrobiony szerokości okna przeglądarki z 710px]:

enter image description here

Czy to IE bug czy zrobiłem coś złego ?

Źródło

2013-05-20 Danield

FIX:

here is a smoothly working jsfiddle of my solution

dalsze dochodzenie matematyki miałem explorer przeczucie www ma problemy stara się zrobić coś głupiego (co jeszcze jest nowy), a to w celu umożliwienia wartości dziesiętne tj margin-left: 250.123px; w ten sposób powodując BARDZO maleńkie niespójności i niszcząc układ.

, aby rozwiązać ten problem i tymczasowo odejmowany 1px ze wszystkich obliczeń i wszystko patrzy gładkie jak może być

@media (max-width: 350px) { 
    .container > div { 
    margin-left: calc(((100% - 150px)/2) - 1px); 
    margin-right: calc(((100% - 150px)/2) - 1px); 
    background:black; 
    } 
} 

@media (min-width: 350px) and (max-width: 550px) { 
    .container > div { 
    margin-right: calc((100% - 300px) - 1px); 
    background:red; 
    } 
    .container > div:nth-child(2n) { 
    margin-right: 0; 
    } 
} 
@media (min-width: 550px) and (max-width: 750px) { 
    .container > div { 
    margin-right: calc(((100% - 450px)/2) - 1px); 
    background:purple; 
    } 
    .container > div:nth-child(3n) { 
    margin-right: 0; 
    } 
} 

@media (min-width: 750px){ 
    .container > div { 
    margin-right: calc(((100% - 600px)/3) - 1px); 
    } 
    .container > div:nth-child(4n) { 
    margin-right: 0; 
    } 
}

EDIT:

ive dodaje kolory do zapytań mediów, aby pomóc rozwiązać źródło problemu i wykluczyć je jako problem. Ive również wykluczył tryb zgodności jako przyczynę tego problemu, a formatowanie Calc wygląda dobrze.

take a look at the updated fiddle

były załamujące zapytania mediów chcielibyśmy zobaczyć niespójności w migotania kolorów oraz ... to prowadzi mnie do uwierzyć, że jest to błąd w obliczeniach matematycznych specyficzne dla naszych definicji margines/dystansowych ... dalej śledztwo wkrótce

mam napotkał kilka problemów z zapytaniami mediów w IE ... kilka błędów warto wymienić

tryb zgodności - upewnić się, że jest wyłączony mogą powodować nieoczekiwane zachowanie lub po prostu złamać zapytań multimedialnych razem

doctype - nie deklarując jedną lub nie posiadające doctype HTML5 może być przyczyną jeszcze większego zapytania mediów niespójności

<!DOCTYPE html>

ive zauważyłem używasz calc() My pierwszą reakcją było upewnienie się, wszyscy operatorzy matematyczne są otoczone białym przestrzeni ... to kolejny napotkał problemy ive, gdzie

calc(2px+5px)

ma tendencję do fail gdzie właściwa składnia powinna być

calc(2px + 5px)

Źródło

2013-05-23 14:42:06 Joe

Szukałem nieco bardziej czystego rozwiązania - to w pełni działa dla mnie, ale wolałbym jakąś metodę skracania lub zaokrąglania. – Joe

+1 Dzięki. Wygląda więc na to, że problem nie ma nic wspólnego z zapytaniami o media, ale raczej z tym, jak IE renderuje subpiksele - jak wyjaśniono [tutaj] (http://ejohn.org/blog/sub-pixel-problems-in-css/) ... dobrze? – Danield

tak, właśnie o tym myślę - dobry artykuł btw – Joe

css funkcja calc błąd w IE

Odpowiedz

Powiązane problemy