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!


2008 08 styczeń 2008

Warunkowe Komentarz: Dla Twojej Only-BĘDĄCE Duex

Kilka miesięcy wcześniej widzieliśmy, jak moglibyśmy to kawałek CSS, który byłby widoczny dla IE6 tylko ( Dla IES Only ). Istnieją inne sposoby do osiągnięcia tego celu, jak również. Po prostu to osobny CSS, specyficzne dla IE docelowej. można to osiągnąć, co jest nazywane warunkowych komentarzy.

Komentarze warunkowe jest sposobem na rozpoznanie typu i wersji przeglądarki. Wykrywanie przeglądarki odbywa się w celu zapewnienia, że ​​treść przedstawiona do konkretnej przeglądarki. Wykrywanie przeglądarki może być wykonane przy użyciu wielu różnych technik. Ta metoda ma kilka zalet w stosunku do starszych metod, które zawarte przełączanie styl, używając JavaScript. Aby wyświetlić ważne mało, będzie;

  • Skrypty nie jest wymagane
  • Cross-browser

Jak to zrobić?

Czy coś w IE 5 tylko
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Zrób coś we wszystkich wersjach IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Zrób coś we wszystkich wersjach IE nowszych, że IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

Więcej warunkowych vartiations, przeczytaj informacje na MSDN:
O warunkowe Komentarz


2007 08 września 2007

Dla IES Only

Jeśli zostały pisanie CSS na chwilę, trzeba przeżyć te czasy, kiedy dosłownie ciągnąć włosy, kiedy twój układ CSS wyglądał dobrze we wszystkich przeglądarkach nowych (mam na myśli przeglądarek później niż IE6), ale IE 6 rzuca złość. Możesz walczyć trudno dostosować CSS, ale to nie działa ... Cóż! Spróbuj Hacks ...

1. Podkreślenia Hack: -
Z definicji, CSS 2.1 specyfikacja pozwala podkreślenia ("_") w identyfikatorów CSS. Ale wiele przeglądarek wciąż wydają się ignorować wszelkie identyfikuje przystąpił podkreślenia ale IE. Ten IE bug / cecha staje się bardzo wyraźny sposób ustawić właściwości CSS dla IES tylko. więc pamiętać, właściwość CSS napisany z podkreśleniem na początku jest widoczna dla programu Internet Explorer (wszystkie wersje ale IE 7)

#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}

Zobacz demonstracje tego podkreślenia siekać

Ponadto, min-height hack dla IE6 korzysta podkreślenia hack, sprawdzić


2. Hash (#) Hack: -
Jak podkreślają hack, to jedno jest za to dla IES oly, z dobrym różnicy, identyfikatory nieruchomości poprzedzone znakiem # na początku jest widoczny dla wszystkich wersji IE, IE7 wliczone w cenę i jest niewidoczny dla innych przeglądarce standardowej.

.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}

Ten hack był używany ładnie wykazać przekrój pionowy dostosowania przeglądarki rozwiązanie, spójrz na ten artykuł, aby dowiedzieć się więcej na


3. CSS dla IE6 tylko: -
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}

Te hacki wydaje Heaven Sent, gdy nic innego nie działa ... Jeśli którykolwiek z tych hacków ratuje swoje życie pewnego dnia, nie zapomnij mnie traktować na kawę :)


2007 12 lipca 2007

Zdarzenie po najechaniu myszką w przejrzysty podział w IE

Miałem ten problem gdzie, jeśli miał zdarzenie mouseover na podziale (div) i tym podziałem, z jakiegoś powodu musiał być przejrzyste (jak w moim przypadku, gdzie była potrzebna, aby wyświetlić niektóre znaczniki na obrazku po najechaniu myszą na to przejrzysty podział), czyli nie udało się wyzwolić zdarzenie mouseover (pracował dobrze w FireFox).

Próbowałem kilka opcji ... wiele z nich było po prostu rozpaczliwa próba zdobycia zdarzenie na ogień w IE. Jednym z sensownych te, które myślałem, że pracy było ustawić kolor tła do podziału i ustaw krycie na zero ... Cóż! dint pracy!

Ostateczne rozwiązanie, które wydawało się do pracy i nie zakłócają funkcjonalności I wymagane było umieścić jeden piksel powtarzane / przezroczysty obraz tła w tym podziałem

... Głupi! ale teraz IE wydaje się szczęśliwy.


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