Przepełnienie CSS nie działa w chrome

Mam "mega menu" zawierające plik .png, który powinien się ukryć po opuszczeniu menu przez użytkownika. Działa zgodnie z oczekiwaniami w IE, ale nie w Chrome - opuszcza obszary obrazu, które pojawiają się poza menu.Przepełnienie CSS nie działa w chrome

Zgodnie Sparkys sugestii, otoJSFiddle

Oto link do mojego folderu rozwoju:

http://libertyeaglearms.com/dev/

oto bezpośredni link do mojego CSS:

http://libertyeaglearms.com/dev/assets/menu.css

Myślę, że może mieć o zrobić z linią 6

.megaCreator a img{ 
    display:block; 
    position:absolute; 
    bottom:-50px; 
    right:-50px; 
    max-width:550px; 
    outline:none; 
    border:none; 
    background:none; 
}

, ale nie jestem pewien.

Jeśli będę musiał umieścić kod bezpośrednio tutaj, to nie będę dokładnie wiedział, gdzie leży problem, więc przeglądając wszystkie css za pośrednictwem rzeczywistego arkusza, czuję, że byłoby lepiej.

Oto kilka zrzutów ekranu pokazujących problem:

Oto myszką na:

enter image description here

Oto mysz się:

enter image description here

UWAGA: Nie używam javascript dla menu, na wypadek gdyby pojawiło się pytanie!

Dzięki :)

TUTAJ Kod FUNKCJONOWANIE ->JS FIDDLE

Źródło

2013-03-03 Mike

Umieściłbym wszystko wewnątrz większego opakowania (szerokość/wysokość 'auto'), aby w pierwszej kolejności uniknąć przepełnienia. Wtedy, gdy zewnętrzna osłona się chowa, wszystko znika. – Sparky

Hm, nie myślałem o tym. Będę z tym bałaganił. Dziękuję :) – Mike

Napisz również skondensowaną wersję HTML/CSS dla tego menu w twoim OP. – Sparky

Jedną z tych zasad jest nadpisanie overflow:

.megaMenu-fade > li.megaMenu-drop:hover > div, 
.megaMenu-fade > li.megaMenu-drop:hover > ul, 
.megaMenu-fade > li > ul li.megaMenu-drop:hover > ul, 
.megaCreator > li.megaMenu-drop:hover > div, 
.megaCreator > li.megaMenu-drop:hover > ul, 
.megaCreator > li > ul li.megaMenu-drop:hover > ul

Patrz:

enter image description here

Źródło

2013-03-03 19:22:00 insertusernamehere

Pomyślałem, że to coś takiego, ale nie mogłem znaleźć tego rzeczywistego źródła. Będę potrzebował zagłębić się głębiej. – Mike

Przepisałem kod i masz rację! Nigdy nie udało mi się zlokalizować dokładnego problemu, ale po wyeliminowaniu znacznej części CSS rozwiązało to problem. Dodałem link do JS Fiddle, który pokazuje, że działa. Dzięki Ci! – Mike

Dużo z nim pracowałem i dowiaduję się, że nie ma to nic wspólnego z css, ponieważ zmieniam wyświetlanie znaczników "img" na "none" (po tym, jak obraz części pozostał na stronie), ale pozostało włączone. Domyślam się, że musi to być chromowany graficzny renderer, który nie poradzi sobie z czymś takim, ponieważ czasami po prostu znika. Domyślam się, że to byłaby wina Chrome'a, a nie twojej i tak samo jak nie umieścisz elementu (jak div) na tym obrazie, problem nadal istnieje.

Źródło

2013-03-03 19:49:49 MIIB

Interesujące, myślę, że zwiększenie rozmiaru menu to moja praca. Dzięki za poświęcenie czasu :) – Mike

Twoje powitanie. Tak, jak się domyślałem, powinieneś zostawić to za elementem – MIIB

Przepełnienie CSS nie działa w chrome

Odpowiedz

Powiązane problemy