2009 07 listopada 2009

CSS ZOOM - Yet Another IE dziwactwo; 3 Pixel Shift

Czas na nowo, gdy wszystkie inne przeglądarki widziane zachowywać się jak powiedział zasad W3C, tj. spirale was z duchem rozwoju rzucając w złość, że nie wydają się mieć poprawkę. Tylko ktoś taki jest ten problem w IE7.

Oświadczenie problem:
Ja i tak może wielu innych twórców poważnych internetowych zauważyłem więcej niż wiele razy, że kiedy zagnieżdżonych pływaków w układzie, na najechaniu na niektórych linków (tagi kotwica), zawierający pojemnik wydaje się przesunąć kilka pikseli w prawo . Próbowałem rozwiązań Google dla tej kwestii, ale trudno znaleźć żadnej rozsądnej odpowiedzi, dlaczego i kiedy to nastąpi (które mogą przyczynić się do zapobiegania ten problem od tego wydarzenia), stąd nigdy nie znalazłem jasnego rozwiązania problemu albo ...

Możliwe rozwiązanie:
Z doświadczenia wiem, wypowiedzenia 90% procent razy to znaczy, że ten problem został rozwiązany poprzez dodanie właściwości zoomu w definicji CSS z mis-zachowuje pojemniku ...

 # Somediv {
       zoom: 1;
 }

ponownie przyczyny są niejasne ... spróbuj tego ...
Niektóre elementy w IE ma "hasLayout" mienia, które "true" domyślnie. Wiele wizualnych CSS zachowania, na przykład alfa filtr działa tylko na element, który hasLayout. i {zoom: 1} wydaje się dawać elementom docelowych nieruchomości hasLayout .... Przydatne? Ja tego nie zrobiłem, że tak ...

Nieruchomość zoom wydaje się również wspierana przez Chrome, ale jej dint wykorzystanie wydają się dużo niekorzystny wpływ na moją układzie ... spróbuj, jeśli działa dla Ciebie ... jeśli nie, dodaj stronę pod "craps CSS"


2009 22 marca 2009

SevenUp! Zachęcaj świat, aby pozbyć się IE6!

Google rozpoczyna ruch zachęty ludzie zrzucić IE6 ... By podsłuchowych IE6 użytkowników POPUP na stronie obciążenia ... nie może być to bardzo dobry pomysł ... ale jako programista UI, mam dołączyć do tego zespołu ... jeden wóz mniej przeglądarka dla mnie martwić ... Przepraszam samolubny jest! ale ja to ten javascript ... (uruchom tą stronę w IE6) ...
Hej! i na jaśniejszym notatki ... Zobacz to wyświetlacz POWER JavaScriptu .... może nawet obniżyć olbrzym (lub kiedyś była)

SO ... Pomoc uwolnienia świata od IE6 z jednej linii javascript!

http://code.google.com/p/sevenup/


2008 17 grudnia 2008

Mis-zachowujące IE8: pęknięć CSS rozmieszczenia (Kierowanie wersję przeglądarki za pomocą znaczników meta w IE8)

Jeśli jesteś osobą css, to wiadomo, ból w sprawie swoich układów pracy cross-browser. IE8 to kolejny klucz w pracach dla nas programistów. Anywaz! jeśli trafisz na ten problem, jak ja wczoraj, gdzie doskonale działa CSS w IE7 (i wcześniej), a Firefox nagle zaczął rzucać napady złości w IE8, spróbuj tego ... To ładnie wydawało się rozwiązać moje problemy w tej chwili ....

Korzystanie z deklaracją Meta, możemy określić silnik renderowania chcielibyśmy IE8 w użyciu. Tak, aby wymusić IE8 aby uczynić jak IE7 ... Wstaw następujący znacznik meta do głowy dokumentu: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Domyślnie Meta IE będzie: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
które mogłyby uczynić IE8 renderowanie strony przy użyciu nowego trybie standardowym.

Jeśli to konieczne, to składnia mogłaby być używana do pomieścić do innych przeglądarek, jak poniżej:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />


WIĘCEJ O Deklaracje typu dokumentu:

JEŚLI jesteś jeszcze zaznajomiony z rodzaju zwierzęcia zwanego "Doctype" ... oto kilka szybkie czytać
Jakie są Deklaracje typu dokumentu? Jakie są dziwactwa PRZEGLĄDARKI i trybie ścisłym?
Ustawianie DOCTYPE w XSL

Dla bardziej w zrozumieniu głębokość około Deklaracje typu dokumentu, spróbuj odwiedzić te linki ...
List Apart: Fix witryny z prawego DOCTYPE!
List Apart: Beyond DOCTYPE: Standardy sieciowe, do przodu zgodności, a IE8

Uwaga: Choć wielu z nas HTML / CSS osoby zostały zaniedbując znaczenie DOCTYPE decleration w naszych dokumentach, Ustawienie odpowiedniego DOCTYPE, to zazwyczaj odpowiedź na najbardziej poprzecznych problemów z przeglądarką.


2008 10 października 2008

NIE tylko dla IE - Selektory CSS Dzieci nie działa w IE

CSS dla przeglądarek Non-IE: Jego brak nowości dla deweloperów CSS, że selektory CSS dziecko jak na poniższym przykładzie, nie wydają się działać w IE.

np. div> p {jakiś css}, co oznacza, że ​​"gdy element span jest dziecko (a nie wnuczka lub wielki wielki dziecko itp.) elementu podziału".

Ale kiedyś ten CON na naszą korzyść. Historycznie, selektor dziecko zostało wykorzystywane do ukrywania poleceń CSS z IE. Po prostu przez umieszczenie html>body przed każdym CSS poleceń IE będzie zignorować:

html>body .foo { CSS commands go here ;}

To działa, ponieważ <body> jest zawsze dzieckiem <html> - może nigdy być oczywiście wnuk czy prawnuk z <html> .

Teraz, że IE 7 rozumie selektora dziecka, trzeba włożyć pustą tag komentarza w bezpośrednio po znak większości IE 7 nie będzie wtedy zrozumieć to selektor (kto wie dlaczego?) I tym samym całkowicie ignorować tego polecenia CSS.:

html> /**/ body .foo { CSS commands go here ;}

Jeśli jeszcze nie widział tych przed, mają zapoznać się z niżej wymienionych, dobrze


2008 04 październik 2008

Znikające HTML / DIV elementów w programie Internet Explorer [IE]

Jak zwykle, jedna z wielu niektórych dziwne problemy ze IE i to trzeba, szeregi w TOP 10 w IE dziwactw.

OŚWIADCZENIE PROBLEM (To był mój problem, może masz podobne misbehaviors):
Mam wiele div na stronie z klasą "sectionhead", która jest niczym innym jak tytuł sekcji na stronie. Tak więc mam trochę styl wygląda tak

. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px;}

Div jest jasny szary pasek z jakiegoś czarnego tekstu. Co się dzieje w IE to niektóre z tych nagłówków sekcji wyświetlane są ok, ale niektóre są niewidoczne, aż można przewijać stronę lub kliknąć coś na stronie itp. Czasami mają tendencję do znikania po kliknięciu 'Alt klawisz, gdy strona w dół lub przewijania z paska przewijania. Czasami wydaje się, pojawić się ponownie po Odśwież (F5) stronę. I krótki idealnie proste DIV z jakimś prostym stylu zachowuje BAD.
Co może powodować takie dziwne zachowanie? Dobrze! Szczerze mówiąc, NO IDEA!

MOŻLIWE ROZWIĄZANIA:
Znowu nie pytaj mnie dlaczego, ale w wielu przypadkach problem ten wydaje się znikać, gdy dodasz position: relative do mis zachowuje elementy stylu, jak to

. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; position: relative}

Dziwne, ale co powiedzieć? Bóg błogosławi mnie z IE!

I rzeczywiście podzielają Z NAMI, gdybyś miał podobne problemy.


2008 15 lipca 2008

IE 8 ścisły tryb i krycie CSS ... Obejścia

Oh No! W wcześniejszym poście kilka dni z powrotem dotyczące Krycie w IE8, zapomniałem wspomnieć o ważnej kwestii, że "IE 8 ścisły tryb nie pozwala na CSS nieprzejrzystości".
Dla tych, którzy dawca zrozumieć, co mam na myśli trybie ścisłym, tutaj jest szybki poradnik .

Prace wokół tego (Przed IE dev zespołu sobie sprawę, że utorowały drogę do ponownej pracy rutyny na całym świecie, na stronach internetowych za pomocą Pop-up lightbox z pewnym nieprzejrzystości i umieścić z powrotem obsługę nieprzezroczystości) jest użycie pół przejrzysty obraz ... najlepiej w formacie PNG (miałem złe doświadczenia z uzyskaniem przezroczyste GIF do pracy, ponieważ miały). Tworzenie obrazu PNG koloru oraz odsetek przejrzystości chcesz, w Tobie ulubiony edytor zdjęć i używać go jako tło dla nakładki koszyka.

tj.
Zamiast coś takiego

. Lighbox_overlay {
background-color: # FFFFFF;
z-index: 1001;
-Moz-opacity: 0.6;
opacity: 0.60;
filter: alpha (opacity = 60);
}

Czy to ....

. Lighbox_overlay {
background: url (bkg.png) repeat;
}

Spróbować, KLIKNIJ TUTAJ! | DO POBRANIA, kliknij tutaj!


2008 06 lipca 2008

Nie "Krycie" w IE8

Jeśli oglądasz tę stronę w IE8, to musi być wyświetlany w pełni nieprzezroczyste białe tło za tego posta. Wczoraj, mój kolega zauważył to do mnie (tak jak ja jestem jednym z tych ludzi, którzy dostosowują się do zmian powoli i stopniowo ... szczególnie przeglądarek. Może powiedzieć, jestem tchórzem, ale tak być nie .... Jako programista UI, zawsze jestem gówno bać nowych wersji przeglądarek ... wiesz co Im tlaking o, prawda?)

Wykopali wokół na chwilę, starając się znaleźć rozwiązanie aby to naprawić i co wtedy ...
Tym razem nasza WSZYSTKO FAWORYT przeglądarka zrobiła to jeszcze raz, zrzucając całą obsługę nieprzezroczystości CSS. Niestandardowe `filter: alpha (opacity = # #)` atrybut CSS został usunięty, Nicei, ale także całkowicie zapomniał dodać CSS3 krycie wsparcie (np. jak wszystko inne przeglądarki to ładnie zachowali ją w). Tak więc, po raz pierwszy od Bóg powiedział nam o CSS krycia (od IE 5.0, chyba), przeglądarka internetowa nie obsługuje przezroczystość CSS.
A teraz kremu na górze: Oficjalna słowo z IE 8 zespole? To "z projektem" i "będziemy rozważać to w przyszłej wersji IE".

PS: Spróbuj tę stronę w FF, przysięgam, że wygląda czysty!


2008 20 czerwca 2008

Biały Bug przestrzenią kosmiczną w zgodzie / Lista pozycji (li) w IE6

Jeśli kiedykolwiek dokonane (lub co jeden) pionowe menu przy użyciu elementów listy (li) tagi i CSS, jakie można napotkać, to kolejny błąd w przeglądarce Internet Explorer, gdzie IE 6 Wkładki te luki pomiędzy elementami list zawierających elementy poziomie bloków, w tzn. jeśli istnieje białe znaki między elementami listy w kodzie. Dzięki, ale nie dzięki, wersja IE 7 wydaje się wolny od tego błędu.
Jeśli tak jak ja i wiele innych, należysz do tej bandy sfrustrowanych twórców, którzy nadal muszą dostać swoje nowe układy, pracujące w IE6 też, to może okazać się przydatne. Zapraszamy do obejrzenia ...

Markup próbki:

<ul id="menu">
<li> <a href="#"> Strona główna </ a> </ li>
<li> <a href="#"> O </ a> </ li>
<li> <a href="#"> Usługi </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Kontakt z nami </ a> </ li>
</ Ul>

Możesz stworzyć jakiś CSS, podobny do tego poniżej, aby transfrom powyższy znaczników w pionowym menu ....

Przykładowy CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Wyniki można zobaczyć ...
wartość null

Rozwiązanie dla tego błędu ... (zmodyfikowany / dodany CSS pogrubioną kursywą)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * to zawiera płynęły elementów listy * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * to poprawki * /
szerokość: 100%; / * błąd białe znaki w IE6 * /
}
# Menu {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Jeśli powyższe doesnot rozwiązanie wydaje się działać (z powodów znanych tylko IE6) ... spróbować tej metody zamiast

Wystarczy dodać te dodatkowe IE6 tylko style do znaczników ...

<- [If lt IE 7>
<style type="text/css">
# Menu li {display: inline-block;}
# Menu li {display: block;}
</ Style>
<[Endif] ->


2008 12 kwietnia 2008

CSS Krzyż Przeglądarka Minimalna wysokość Hack

Napisz IE 6, Firefox był na tyle uprzejmy dla nas programistów interfejsu użytkownika, dodając kilka dodatkowych właściwości CSS standardowe dla większości innych standardowych przeglądarek. Jednym z takich przydatna właściwość w "min-height". Dość prosta właściwość, że nie potrzebuje dużo dmuchania wyjaśnienia. Kiedy min-height dla podziału jest ustawiony, to zawsze zachowuje ten height, gdy zawartość mieści się zajmuje mniej niż może pomieścić i ważniejsze (w przeciwieństwie do zwykłego vanilla "wysokości" majątku) Wagi lub słownie CSS, zachowuje się jak Podział których wzniosłość jest ustawiony na "auto" ...

Dla niektórych z nas biednych deweloperów, którzy nadal są zobowiązane do kodu CSS, które muszą również działać w IE6, nie-dostępność "min-height", może okazać się korek pokazu kiedyś ... rozpacz dawca.

Na szczęście mamy tyle dziwactw w IE, które moglibyśmy wykorzystać na korzyść out i włamać naszą drogę, aby osiągnąć nasz cel ... czyli dokonania podziału DIVISION jakby jego min-height w IE6

Rozwiązanie 1: Użycie podkreślenia Hack [ ... Czytaj więcej ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>


Rozwiązanie 2: Za pomocą atrybutów CSS Selector Hack

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>

Atrybut CSS Selector Hack korzysta z faktu, że przeglądarki wcześniej tha IE6 ignorowany Atrybut o wybierak. Zwróć uwagę na wymóg innego rejonu zbiornika z class = "SomeClass". Wystarczy presense tego atrybutu klasy dla tego podziału, nadpisuje wysokość z powrotem na auto dla Opery, Mozilli i MSIE7 i późniejszych. IE6, który nie obsługuje selektory Atrybut, ignoruje go.

Zobacz demo min-height hack dla IE6



2008 15 marca 2008

Działa drażniąco Wybierz Skrzynki widoczne przez Podręczne Wydziałów

Przy wielu okazjach, podczas wykonywania układów stron z popup działów / Lightboksy / porady itp spotykamy sytuacje, w których pewne formy SELECT obiekty akurat jest w tych Podręczne wydziałów, zgodnie z projektem i to widać przez .... YUK!

Dobrze! można łatwo naprawić to, dostosowując z-index wartości odpowiednio dla FF i IE7. Ale Good Old (pun przeznaczone) IE6 nie zachowują się zgodnie z planem .... SELECT Pokaż BOX poprzez, nawet po zastosowaniu niektórych drastycznie wysokie z-index wartości twój Division PopUp ... Bummer!!

Nie ma Poprawki do tego problemu, ale są, moim zdaniem, więcej niż kilka sposób na obejście tego problemu, ale jestem tutaj, aby powiedzieć Ci najprostsze rozwiązanie, które używam, która działa dobrze dla mnie, w większości przypadki ....

"Ukrywanie pola ROUGE SELECT Kiedy pokazujesz POPUP"

Po prostu w swoim fragment skryptu, w którym pokazują się popup, dodać kawałek skryptu aby ustawić widoczność polu Wybierz do "Ukryte"

document.getElementById ('my_select ") style.visibilty =" hidden ".;

I pamiętaj, aby ustawić go z powrotem na koniec wyskakujących Division

. document.getElementById ('my_select ") style.visibilty =" widoczny ";

gdzie "my_select" jest identyfikator podrażnienia polu SELECT

Mam nadzieję, że to pomaga ...

PS. Istnieją inne opcje, takie jak ofcourse dynamicznie positionining ramki IFRAME (te same rozmiary jak ty PopUp) pod Popup DIV ... To działa zbyt dobrze, ale z dodatkiem obciążeń DOM Elements, skrypty oraz bóle głowy. Użyłem tego rozwiązania zbyt, a jeśli nie potrzebujesz pomocy z tą opcją, daj mi znać. Chętnie pomożemy!


NDK startowej | Wyrażając IT | Podniebienie Wyrażając | Penmenship Wyrażając | Awe Wyrażając | Wyrażając Myself