Esprimere IT

Tempo e di nuovo, quando tutti gli altri browser visto comportarsi come detto dalle norme w3c, spirali IE fuori dello spirito sviluppo gettando un capriccio, che non sembra avere una correzione. Solo uno così è questo problema in IE7.

Problema Dichiarazione:
Mi e quindi potrebbero molti degli altri sviluppatori web gravi hanno notato più di molte volte, che quando ci annidati galleggia nel layout, al passaggio del mouse su alcuni link (tag di ancoraggio), il contenitore contenente sembra spostare qualche pixel a destra . Ho cercato di soluzioni Google per questo problema, ma non sono quasi mai trovato una risposta ragionevole perché e quando si verifica (che potrebbe aiutare a prevenire questo problema accada), quindi non ho mai trovato una soluzione chiara al problema sia ...

Soluzione possibile:
Fuori di esperienza, ho cento avviso il 90% del tempo cioè, che questo problema è stato risolto con l'aggiunta di una proprietà zoom nella definizione CSS della mis-contenitore di comportarsi ...

 # {Somediv
       zoom: 1;
 }

ancora una volta le ragioni sono ambigui ... provate questo ...
Alcuni elementi di IE hanno una proprietà "hasLayout", che è "vero" per impostazione predefinita. Molti comportamenti visivi CSS, per esempio: un filtro alpha funziona solo su un elemento che hasLayout. e il {Zoom: 1} sembra dare gli elementi di destinazione della proprietà hasLayout .... Utile? Non penso così ...

La proprietà sembra zoom è anche supportato da Chrome, ma il suo utilizzo a furia sembra fare molto effetto negativo sul mio plastico ... provarlo, se funziona per voi ... se ciò non avviene, segnalibro a questa pagina sotto la voce "craps CSS"

Google inizia un popolo di movimento rapide per eseguire il dump IE6 ... By utenti microspie IE6 con un popup al caricamento della pagina ... non può essere una buona idea ... ma essendo uno sviluppatore dell'interfaccia utente, devo partecipare a questo carro band ... un browser meno per me preoccuparsi Ci dispiace ... è egoista! ma ho includere questo javascript ... (TRY QUESTA PAGINA IN IE6) ...
Hey! e sulla nota più luminoso ... Vedi è una visualizzazione del potere di JavaScript .... può anche abbattere un gigante (o una volta era)

SO ... Aiuto liberare il mondo di IE6 con una linea di javascript!

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

Se siete persone css, si dovrebbe conoscere il dolore ottenere i vostri layout di lavoro cross-browser. IE8 è ancora un altro bastone tra le ruote per gli sviluppatori noi. Anywaz! se si preme su questo problema, come ho fatto ieri, in cui il vostro perfettamente funzionante CSS in IE7 (e precedenti) e Firefox ha improvvisamente iniziato a tirare i capricci in IE8, provate questo ... E 'bene sembrava risolvere i miei problemi, per il momento ....

Utilizzando dichiarazione Meta, possiamo specificare il motore di rendering vorremmo utilizzare IE8. Quindi, per forza di rendere IE8 come IE7 ... Inserire il seguente meta tag nella testa del documento: -

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

Per impostazione predefinita Meta IE potrebbe essere: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
che renderebbe IE8 il rendering della pagina utilizzando la nuova modalità standard.

Se necessario, questa sintassi potrebbe essere utilizzato per accogliere per altri browser come di seguito:

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

PIU 'A proposito di DOCTYPE:

Se siete ancora familiarità con il tipo di animale chiamato "Doctype" ... ecco alcune lettura veloce
Cosa sono i DOCTYPE? Quali sono i difetti dei browser e Modalità rigorosa?
Impostazione del DOCTYPE in XSL

Per una più profonda conoscenza circa DOCTYPE, provare a visitare questi link ...
A List Apart: Fix Your Site Con il DOCTYPE destra!
A List Apart: Beyond DOCTYPE: Web Standards, le compatibilità in avanti e IE8

Nota: Anche se molti di noi HTML / CSS persone sono state trascurando l'importanza della decleration DOCTYPE nei nostri documenti, Impostazione del DOCTYPE destra, è di solito la risposta ai problemi del browser più trasversali.

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

• Commenti condizionali: Per i vostri IE Only-Part Duex
• CSS hack: Javascript, CSS, HTML solo per Firefox
• Per il vostro IE Only

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.

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!

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!

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 ...

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] ->

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

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!