2011-12-02 6 views
18

Próbuję animować wysuwanie menu za pomocą skryptu. Aby to zrobić, muszę animować właściwość marginTop elementu i zwiększać ją z -30px do 0px.Nie można ustawić stylu marginTop ze skryptem przy użyciu IE8, ale działa w przeglądarkach dla dorosłych ludzi.

Jednak w IE8 animacja po prostu nie robi nic. Zauważyłem, że ustawienie w skrypcie marginTop wydaje się nie mieć żadnego efektu. W Chrome i Firefox działa to dobrze.

Oto przykład, który będzie współpracować z Chrome/Firefox, ale nie IE:

http://jsfiddle.net/rm58T/2/

Czy to jest bug IE, a jeśli tak, to czy są jakieś obejścia tego problemu? Dzięki!

Aktualizacja:

Oto kilka zrzutów ekranu z błędem.

W Chrome, mój Fiddle wygląda następująco (można zobaczyć „Nazwa nowego menu” tekstu, ponieważ zmieniliśmy margines ze skryptu)

enter image description here

w IE8/Vista, to wygląda to. Mogę potwierdzić w narzędziach dla programistów, które topMargin jest rzeczywiście 0px zgodnie z oczekiwaniami, jednak elementy nie były ponownie rysowane:

enter image description here

Kolejna aktualizacja:

repros tego błędu (przynajmniej dla mnie) na IE8 działającym na Windows 7, a także IE8 działającym na Windows 2008 Server. To nie repro dla mnie na IE7 uruchomiony na WinXP. Nie mam żadnych maszyn IE9, żeby to przetestować.

Yet Another Aktualizacja:

znalazłem jeden potencjalny obejście. Jeśli ustawię p.newmenu na position: absolute; zamiast position: relative;, to działa. Jednak w moim przypadku hostuję tę całą rzecz w wyskakującym menu i potrzebuję tej kontroli, aby wypchnąć dno modalnego okna dialogowego, więc absolutne umieszczenie go nie jest opcją. Być może jednak ta wiedza może pomóc w znalezieniu praktycznego rozwiązania. Przykład tej pracy można znaleźć here.

Uwierzysz Kolejna aktualizacja ?:

I zrobił znaleźć obejście do teraz. Jeśli użyję wartości top: -30px; zamiast ujemnego marginesu górnego, wszystko będzie działać. top zachowuje się nieco inaczej niż margines i sprawia, że ​​interfejs użytkownika nie wygląda tak ładnie. W szczególności, gdy używasz top: -30px, będziesz mieć 30 piksli spacji pod twoim elementem, ponieważ pozycjonowanie względne nie ma wpływu na przepływ innych stron.

Bardzo chciałbym dowiedzieć się, dlaczego nie mogę wykorzystać ujemnego górnego marginesu na IE, tak jak ja w innych przeglądarkach, więc wciąż mam nadzieję, że ktoś może udzielić odpowiedzi, która zapewni wszystkie korzyści ujemny górny margines, ale także działa z IE8.

+8

+1 za sam tytuł –

+0

Dzięki :) Zaczynam przyjmować fakt, że moja strona prawdopodobnie będzie wyglądać jak osioł w IE. –

+1

W zależności od tego, kto jest oczekiwaną publicznością, to może nadal działać –

Odpowiedz

2

Wyzwalaczem tego zachowania jest sposób, w jaki IE8 obsługuje element fieldset.

Można obejść go, ustawiając wyświetlacz dla zestawu pól na wbudowany (lub wbudowany blok).

div.modal.addmenu fieldset { 
    display: inline; 
} 
+0

Dzięki! Wskazówka "inline-block" zdecydowanie pomogła mi znaleźć rozwiązanie. –

1

To nie jest dokładnie błąd; opiera się tylko na fakcie, że (aby nadążyć za porównaniami wydajności) IE został zbudowany od wersji 5.5 ze zminimalizowanym zestawem definicji statycznych;

To znaczy: Zamiast wydać dowolny element, całą i poprawną definicję (w zależności od tego, z jakiego boga specyfikacji wychodzisz ...) w przypadku tego typu, IE używa mniej.


TODO: Oddaj, co należy zaliczyć do działania jako najwyższego modelu ust stosunkowo umieszczonym; WYŚWIETLAJ zgodnie z jej talentami; jakikolwiek super akapit powinien wykonać wybieg inline, nawet jeśli jest to blok -head, możesz spróbować użyć cukru i whiplashes, aby zapamiętać swoje nieprzyjemne P jego pochodzenia jako inline-block. Jest szał P, dają trochę szacunku dla swoich talentów ...


Dojo: W rzeczywistości, jak runy czytania skryptu-javalchemist być tym, który musi przejąć kontrolę nad zaparzyć przeglądarka obsługuje. Czy to sprawia, że ​​boom, cicho ...


Godó: niezbędne rzeczy do zrobienia, jeśli chcesz używać ujemne marże w przeglądarkach, które nie odgrywają prawnie:

  • pamiętać elementy, z których chcesz korzystać z ich pochodzenia; nie wierzę w przeglądarkę sprzedawców, że zrobili to już dla ciebie

    • jeśli dopiero się dla IE 7+ używać display: inline-block;
    • jeśli chcesz dostać ujemne marginesy do znaczących skutków dla wszystkich przeglądarek, ale można zapomnieć o NS4, a następnie użyć display: inline; lub wyświetlacz: blok;
  • Nie zapomnij zbudować fundament dla swoich ujemnych marginesów: set position: relative;


MOJO: Jeśli IE-Bety i starsi, jak 5,5 lub 6 są w punkcie zainteresowania, trzeba upewnić się, że względne położenie ujemna marża ustęp ma wartości dla szerokość i wysokość; W zależności od tego, co próbujesz osiągnąć, czasami: wysokość: auto; pomaga.

Powiązane problemy