2008 10 ottobre 2008

NON per IE Only - selettori CSS bambini non funzionano in IE

CSS per i browser diversi da IE: il suo non c'è nessuna notizia per gli sviluppatori CSS, selettori CSS per bambini, come nell'esempio qui sotto, non sembrano funzionare in IE.

ad esempio div> span {} qualche css, che significa "quando un elemento span è un bambino (e non un nipote o grande nipote, ecc) di un elemento di divisione".

Ma abbiamo usato questa CON a nostro vantaggio. Storicamente, il selettore bambino è stato utilizzato per nascondere i comandi CSS di IE. Semplicemente inserendo html>body di fronte a qualsiasi comando CSS IE lo ignora:

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

Il sistema funziona perché <body> è sempre un figlio di <html> - può naturalmente essere mai un nipote o pronipote di <html> .

Ora che IE 7 comprende il selettore di figlio, è necessario inserire un tag vuoto nel commento subito dopo il segno di maggiore IE 7, allora, non capire questo selettore (chissà perché?) E pertanto ignorano totalmente questo comando CSS.:

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

Se non hanno già visto questi in precedenza, hanno una lettura attraverso le seguenti e


2008 4 OTTOBRE 2008

Disappearing HTML / DIV elementi in Internet Explorer [IE]

Come al solito, uno dei tanti alcuni strani problemi con IE e questo si deve ranghi nella TOP 10 di stranezze di IE.

PROBLEMA ECONOMICO (Questo era il mio problema, forse hai misbehaviors simili):
Ho molte persone DIV nella pagina con la classe "sectionhead", che non è altro che il titolo di una sezione della pagina. Così ho un certo stile, cercando in questo modo

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

Il div è una barra grigio chiaro con un testo nero. Cosa succede in IE è alcune di queste intestazioni di sezione sono visualizzati ok, ma alcuni sono invisibili, FINO, scorrere la pagina o cliccare qualcosa sulla pagina, ecc Qualche tendono a scomparire quando si fa clic sul tasto 'alt' quando pagina verso il basso o scorrere con la barra di scorrimento. A volte sembrano riapparire quando si ricarica (f5) la pagina. Ho insomma un DIV estremamente semplice con un po 'stile semplice si comporta BAD.
Che cosa potrebbe causare un tale comportamento irregolare? Bene! Francamente, NO IDEA!

SOLUZIONE POSSIBILE:
Anche in questo caso non chiedetemi perché, ma in molti casi questo problema tende a svanire quando si aggiunge position: relative alla mis comportarsi stile di elementi, come questo

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

Strano, ma cosa dire? Dio mi benedica da IE!

E FARE SHARE CON NOI, SE avuto problemi simili.


2008 15 luglio 2008

IE 8 modalità rigorosa e l'opacità CSS ... di lavoro intorno

Oh Well! Nel precedente messaggio qualche giorno fa per quanto riguarda l'opacità in IE8, ho dimenticato di menzionare un punto importante che "IE 8 strict mode non permette di CSS opacità".
Per coloro che donot capire cosa voglio dire con modalità rigorosa, ecco breve tutorial .

Un lavoro intorno a questa (Prima team IE dev rendono conto che hanno via lastricata di una nuova routine di lavoro in tutto il mondo, per i siti web che utilizzano Pop-up lightboxes con qualche opacità, e rimettere il supporto per opacità) è di usare un semi un'immagine trasparente ... preferibilmente in formato PNG (ho avuto un'esperienza negativa ottenere immagini GIF trasparenti per lavorare come avrebbero dovuto). Creare un'immagine PNG del colore e la percentuale di trasparenza che ti piace, in voi editor di immagini e usarla come immagine di sfondo per il vostro overlay lightbox.

vale a dire
Invece di qualcosa di simile

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

Fate questo ....

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

Per provarlo, CLICCA QUI! | Per scaricarlo, clicca QUI!


2008 6 LUGLIO 2008

No "opacità" in IE8

Se si sta visualizzando questa pagina in IE8, allora si deve essere visto a pieno sfondo opaco bianco dietro questo post. Ieri, il mio collega notare a me (come io sono uno di quelle persone che si adattano ai cambiamenti lentamente e costantemente ... in particolare i browser. Potrebbe dire, sono un codardo, ma così sia .... Essendo uno sviluppatore dell'interfaccia utente, sono sempre merda paura di nuove versioni del browser ... sai cosa Im tlaking, giusto?)

Scavato intorno per tempo, cercando di trovare una soluzione per risolvere il problema e poi cosa ...
Questa volta il nostro tutti i browser TEMPO PREFERITO ha fatto tutto da capo facendo cadere tutto il supporto per l'opacità CSS. Il non-standard `filter: alpha (opacity = # #)` attributo CSS è stato rimosso, Nizza, ma anche del tutto dimenticato di aggiungere il supporto CSS3 opacità (come come tutti gli altri browser è ben l'hanno tenuto in). Così, per la prima volta da quando Dio ci ha parlato di CSS opacità (dal momento che IE 5.0, credo), un browser web non supporta opacità CSS.
Ed ora la crema sulla parte superiore: la parola ufficiale dal team di IE 8? E '"by design" e ​​"noi prenderà in considerazione questo in una futura versione di IE".

PS: Provate questa pagina in FF, lo giuro è molto bello!


2008 20 giugno 2008

Bug Spazio Bianco in linea / List Items (li) in IE6

Se avete mai fatto (o fare uno) un menu verticale con voci di elenco (LI) e tag CSS, è possibile incontrare, questo ennesimo bug in Internet Explorer, dove IE 6 inserti in questi spazi vuoti tra gli elementi dell'elenco che contengono elementi a livello di blocco, vale a dire se c'è qualche spazio bianco tra le voci di elenco nel markup. Grazie, ma no grazie, la versione IE 7 sembra esente da questo bug.
Se, come me, e molti altri, tu appartieni a questa fascia di sviluppatori frustrati, che ancora devono ottenere i loro nuovi layout, lavorando anche in IE6, allora questo potrebbe rivelarsi utile. Dai un'occhiata ...

Esempio di markup:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Chi </ a> </ li>
<li> <a href="#"> Servizi </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Contatti </ a> </ li>
</ Ul>

Si potrebbe creare qualche CSS, simile a quello riportato di seguito, per transfrom il codice sopra in un menu verticale ....

Esempio di CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

I risultati si vedono ...
nullo

Soluzione per questo bug ... (modificato / aggiunto CSS in grassetto corsivo)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * questo contiene elementi di una lista float * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Questo risolve il * /
width: 100%; / * bug spazi in IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Se il doesnot soluzione di cui sopra sembra funzionare (per ragioni note solo a IE6) ... provare questo metodo, invece

Basta aggiungere questo ulteriore stili IE6 solo al markup ...

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


2008 12 Apr 2008

CSS Croce Browser Altezza minima Hack

Messaggio IE 6, MSIE è stato così gentile da noi sviluppatori dell'interfaccia utente con l'aggiunta di qualche proprietà più CSS standard per la maggior parte degli altri browser standard. Una proprietà come utile in "min-height". Proprietà piuttosto semplice che ha bisogno di alcuna spiegazione a lungo senza fiato. Quando un min-height per una divisione è impostato, mantiene sempre che l'altezza set quando il contenuto che ospita occupa meno di quanto può contenere e soprattutto (a differenza del plain vanilla proprietà "height"), scale ovvero CSS, si comporta come una divisione di cui "l'altezza" è impostato su "auto" ...

Per alcuni di noi poveri sviluppatori, che ancora sono tenuti al codice CSS che devono lavorare anche in IE6, non-disponibilità del "min-height", potrebbe rivelarsi un tappo di spettacolo ... a volte la disperazione Donot.

Fortunatamente, abbiamo capricci abbastanza in IE, che avremmo usato a vantaggio di uscire e incidere attraverso il nostro modo per raggiungere il nostro obiettivo ... cioè fare una divisione divisione come se il suo min-height in IE6

Soluzione 1: Utilizzare il carattere di sottolineatura Hack [ ... Read more ]

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

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


Soluzione 2: Utilizzo dell'attributo 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>

L'attributo CSS Selector Hack si avvale del fatto che i browser precedenti IE6 tha ignorato uno atribute-selector. Si noti l'esigenza di un'altra divisione contenitore con class = "someclass". Solo il presense dell'attributo classe per questa divisione, prevale l'altezza dello schienale per auto per Opera, Mozilla e MSIE7 e versioni successive. IE6, che non supporta selettori atribute, lo ignora.

Visualizza la demo del min-height hack per IE6



2008 15 marzo 2008

Irritante caselle di selezione visibili attraverso le divisioni Popup

In diverse occasioni, mentre si fa layout di pagina con le divisioni popup / lightbox / Consigli ecc ci imbattiamo in situazioni in cui alcuni oggetti a SELECT capita di essere in queste divisioni POPUP, dal design e si vede attraverso .... YUK!

Bene! si potrebbe facilmente risolvere questo problema modificando le Z-INDEX valori in modo appropriato per FF e IE7. Ma il buon vecchio (gioco di parole) IE6 non si comporta come previsto .... Lo spettacolo BOX Selezionare tramite, anche dopo aver applicato alcuni drasticamente elevati valori di Z-INDEX al Division PopUp ... Bummer!!

Non ci sono soluzioni per questo problema, ma ci sono, credo, più che un modo che pochi al mondo del lavoro attorno a questo problema, ma Im qui per dirvi la soluzione più semplice che uso, che funziona bene per me, nella maggior parte dei casi ....

"Nascondere la casella ROUGE Selezionare quando si DIMOSTRARE IL POPUP"

Semplicemente nel frammento di script in cui si mostra il popup, aggiungere un pezzo di script per impostare la visibilità del Box SELECT per "Hidden"

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

E ricordatevi di impostare nuovamente la chiusura di vostra divisione PopUp

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

dove "my_select" è l'ID del Box irritazione SELEZIONA

Spero che questo aiuti ...

PS. Ci sono altre opzioni come ofcourse dinamicamente positionining un IFRAME (stesse dimensioni di PopUp) sotto il DIV Popup ... Questo funziona bene anche, ma con l'aggiunta di carichi di elementi DOM, script e mal di testa. Ho usato questa soluzione anche, e se hai bisogno di aiuto con questa opzione, non fatemelo sapere. Sarà lieto di aiutarvi!


2008 8 gennaio 2008

Commenti condizionali: Per i vostri IE Only-Part Duex

Pochi mesi prima abbiamo visto, come si potrebbe comprendere un pezzo di CSS che sarebbe visibile solo IE6 ( Per il vostro IE Only ). Ci sono altri modi per raggiungere questo obiettivo pure. Basta includere un CSS separato, specifico per il tuo IE target. ciò potrebbe essere ottenuto con quello che si chiama come commenti condizionali.

Commenti condizionali è un modo per rilevare il tipo di browser e la versione. Rilevamento Browser viene eseguita per garantire che il contenuto presentato al browser specifico. Rilevamento del browser può essere fatto utilizzando diverse tecniche. Questo metodo ha diversi vantaggi rispetto ai metodi precedenti, che comprendevano la commutazione di stile utilizzando javascript. Per elencare alcuni importanti, sarebbe;

  • Script non è necessario
  • Cross-browser

Come possiamo fare questo?

Fare qualcosa in IE 5 solo
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Fare qualcosa in tutte le versioni di IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Fare qualcosa in tutte le versioni di IE più recenti che IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

Per ulteriori vartiations condizionali, di leggere queste informazioni su MSDN:
A proposito di commento condizionale


2007 8 SETTEMBRE 2007

Per il vostro IE Only

Se avete scritto CSS per po ', si dovrebbe avere esperienza nei momenti in cui è letteralmente tirare i capelli quando i vostri layout CSS guardato bene in tutti i nuovi browser (intendo i browser IE6 più tardi), ma IE 6 genera un capriccio. Si lotta duramente per regolare il CSS, ma non funziona ... Beh! Prova questi hack ...

1. Underscore Hack: -
Per definizione, le specifiche CSS 2.1 consente di sottolineatura ("_") in identificatori CSS. Ma molti browser sembrano ancora ignorare qualsiasi identifica proceduto con una sottolineatura, ma IE. Questo bug di IE / funzione diventa così un modo molto chiaro per impostare le proprietà CSS per IE solo. ricordate, una proprietà CSS scritto con il carattere di sottolineatura sulla partenza è visibile per Internet Explorer (tutte le versioni di IE, ma 7)

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

Vedi Dimostrazione di questa sottolineatura trucco

Inoltre, il min-height hack per IE6 utilizza la sottolineatura hack, check out


2. Cancelletto (#) Hack: -
Come la sottolineatura hack, questo è troppo è per IE Oly, con una differenza buona, identificatori di proprietà precedute da # sull'inizio è visibile per tutte le versioni di IE, IE7 inclusa ed è invisibile per qualsiasi altro browser standard.

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

Questo hack è stato usato bene a dimostrare un cross browser allineamento verticale soluzione, dare un'occhiata a questo articolo per trovare il nostro più


3. CSS per IE6 solo: -
#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*/
}

Queste hack sembra mandato dal cielo, quando niente funziona ... Se uno qualsiasi di questi hack salva la tua vita un giorno, non dimenticare di curare me un caffè :)


2007 12 luglio 2007

Evento mouseover in una divisione trasparente in IE

Ho avuto questo problema in cui, se si ha un evento di passaggio del mouse su una divisione (DIV) e che la divisione, per qualche buon motivo doveva essere trasparente (come nel mio caso, dove è stato tenuto a visualizzare alcuni tag su un'immagine al passaggio del mouse su questa divisione trasparente), IE non è riuscito a attivare l'evento mouseover (ha funzionato bene in FireFox).

Provato diverse opzioni ... molti dei quali era solo un disperato tentativo di ottenere l'evento al fuoco in IE. Uno di quelli sensibili, che ho pensato potrebbe funzionare è stato quello di impostare un colore di sfondo alla divisione e impostare l'opacità a zero ... Beh! forza lavoro!

La soluzione finale che sembrava funzionare e non disturbare la funzionalità avevo bisogno era di mettere un pixel ripetuto / immagine di sfondo trasparente in tale divisione

... Silly! ma ora IE sembra felice.


NDK casa | Esprimendo IT | Gusto Esprimendo | Penmenship Esprimendo | Awe Esprimendo | esprimermi