Expressant TI

Una i altra vegada, quan tots els altres navegadors vist comportar-se segons el que s'ha dit per les normes del W3C, espirals és a dir que vostè fos l'esperit de desenvolupament per part d'un enrabiada, que no sembla tenir una solució. Només tal és aquest problema a Internet Explorer 7.

Enunciat del problema:
Jo pel que pot que molts dels desenvolupadors web greus altres han notat més que moltes vegades, que quan hi ha niats flota en el disseny, en vol estacionari sobre alguns enllaços (anchor), el recipient que conté sembla desplaçar-se uns pocs píxels cap a la dreta . He tractat de solucions de Google per aquest tema, però gairebé no han trobat cap resposta raonable de per què i quan passa (que podria ajudar a evitar que aquest problema passi), per tant, mai he trobat una solució clara al problema, ja sigui ...

Solució possible:
De l'experiència, no tinc per cent previ avís el 90% del temps, és a dir, que aquest problema se soluciona mitjançant l'addició d'una propietat de zoom en la definició CSS ​​del contenidor mal comportament ...

 # {Somediv
       zoom: 1;
 }

un cop més les raons són ambigus ... intenteu el següent ...
Alguns dels elements en l'IE té un "hasLayout" la propietat, que és "veritat" per defecte. Molts comportaments visuals CSS, per exemple, un filtre alfa només funciona en un element que hasLayout. i el {zoom: 1} sembla donar els elements de destinació de la propietat hasLayout .... ¿Útil? No ho crec ...

La propietat zoom també s'assembla amb el suport de Chrome, però el seu ús a força sembla tenir efectes adversos tant en el disseny de la meva ... prova-ho, si funciona per a tu ... si no ho fa, marcar aquesta pàgina, sota dels daus "CSS"

Google comença a gent del moviment ràpides per bolcar IE6 ... Per usuaris escoltes IE6 amb una finestra emergent en la càrrega de la pàgina ... no pot ser una molt bona idea ... però com que és un desenvolupador d'interfície d'usuari, he de formar part d'aquest vagó de la banda ... un navegador menys perquè jo em preocupi Malauradament ... és egoista! però he incloure aquest javascript ... (provi aquesta pàgina en IE6) ...
Hey! i en la nota més brillant ... Veure és una mostra de el poder de JavaScript .... fins i tot pot fer caure un gegant (o un cop ho va ser)

LLAVORS ... Ajuda lliurar al món de IE6 amb una línia de javascript!

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

Si vostè és una persona css, vostè sap que el dolor en aconseguir els dissenys de treball multi-navegador. IE8 és un altre pal a la roda per als desenvolupadors de nosaltres. Anywaz! si es colpeja sobre aquest tema, com ho vaig fer ahir, on el seu perfecte estat de funcionament de CSS a Internet Explorer 7 (i anteriors) i Firefox de sobte ha començat fer enrabiades en IE8, intenteu el següent ... Es molt ben plantat per arreglar els meus problemes de moment ....

Ús de la declaració del Meta, es pot especificar el motor de renderitzat de l'Internet Explorer 8 ens agradaria utilitzar. Així doncs, per obligar a Internet Explorer 8 per fer que Internet Explorer 7 ... Inseriu la següent etiqueta META al cap del seu document: -

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

Per defecte IE Meta seria la següent: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
el que faria que IE8 representar la pàgina fent servir el mode de noves normes.

Si cal, aquesta sintaxi podria ser utilitzat per acomodar per a altres navegadors com a continuació:

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

Més Sobre DOCTYPEs:

Si vostè encara no estan familiaritzats amb el tipus d'animal que es diu "Doctype" ... vet aquí una mica de lectura ràpida
Quins són DOCTYPEs? Què són els Caprichos de navegador i de manera estricta?
Ajust de la DOCTYPE en XSL

Per a una anàlisi més profund coneixement sobre DOCTYPEs, intent que visita aquests links ...
A List Apart: Establiu seu lloc amb el DOCTYPE Molt bé!
A List Apart: Més enllà de DOCTYPE: Estàndards Web, compatibilitat cap endavant, i IE8

Nota: Encara que molts de nosaltres HTML / CSS gent ha estat descuidant la importància de decleration DOCTYPE en els nostres documents, Configuració de la DOCTYPE correcte, sol ser la resposta a les qüestions de navegació més transversal.

CSS per navegadors no IE: No és cap novetat per als desenvolupadors de CSS, selectors CSS nens com l'exemple de baix, no sembla que funcioni en IE.

per exemple div> {lapse d'una mica de CSS}, això significa que "quan un element span és un nen (i no un nét o besnét infantil, etc) d'un element de divisió".

No obstant això, hem utilitzat aquest context al nostre favor. Històricament, el selector de fill s'ha utilitzat per ocultar les ordres CSS de l'IE. Simplement mitjançant la col.locació de html>body davant de qualsevol IE CSS comanda ignorar-ho:

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

Això funciona perquè <body> sempre és un fill de <html> - mai hauríeu d', un nét o besnét de <html> .

Ara que l'IE 7 comprèn el selector de fill, vostè ha de inserir una etiqueta de comentari buit just després del signe més gran que l'IE 7, no tornarà a entendre aquest selector (qui sap per què?) I per tant s'ignoren totalment aquesta comanda CSS.:

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

Si no l'ha vist abans, té una lectura a través de la següent, així

• Comentaris condicionals: Per a la seva EI-Només la part Duex
• CSS hack: Javascript, CSS, HTML del Firefox només
• Per a la seva IE només

Com de costum, un dels molts problemes estranys amb Internet Explorer i això hi ha files al TOP 10 de les peculiaritats de l'IE.

PLANTEJAMENT DEL PROBLEMA (aquest era el meu problema, pot ser que tingui males conductes similars):
Tinc moltes DIV és a la pàgina amb la classe "sectionhead", que no és sinó el títol d'una secció a la pàgina. Així que he una mica d'estil amb aquest aspecte

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

El div és una barra de color gris clar amb una mica de text en negre. Què passa a l'IE és alguns d'aquests encapçalats de secció es mostren bé, però alguns són invisibles, fins que, de desplaçar-se per la pàgina o feu clic a alguna cosa a la pàgina, etc De vegades tendeixen a desaparèixer quan feu clic a la tecla 'Alt' quan la pàgina cap avall o desplaçar amb la barra de desplaçament. De vegades sembla que tornarà a aparèixer quan es torni a carregar (F5) la pàgina. Em curt un DIV molt simple amb una mica d'estil senzill i es comporta BAD.
Què pot causar aquest tipus de comportament erràtic? Bé! Francament, ni idea!

POSSIBLE SOLUCIÓ:
Un cop més no em preguntis per què, però en molts casos, aquest problema tendeix a desaparèixer quan s'agrega la posició: en relació amb el mal comportament estil dels elements, així

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

Estrany, però què dir? Déu em beneeixi per l'IE!

I Comparteixi amb els EUA, si tenien problemes similars.

Oh Well! En el post anterior fa uns dies pel que fa a l'opacitat en IE8, em vaig oblidar d'esmentar un punt important que "IE 8 en mode estricte no permet CSS opacitat".
Per als que nose entén el que vull dir amb la manera estricte, aquí és una guia ràpida .

Un treball entorn a això (Abans de l'IE equip de desenvolupament adonar que tenen camí pavimentat per a les rutines de treball de re-tothom, pels llocs web que utilitzen pop-up Taules de llum amb una mica d'opacitat, i tornar a posar el suport a OPACITAT) és utilitzar un la imatge semitransparent ... preferiblement en format PNG (que he tingut mala experiència rebent imatges GIF transparents per treballar, ja que se suposa que). Crear una imatge PNG de color i el percentatge de transparència que t'agrada, en la qual l'editor d'imatges favorit i usar-lo com una imatge de fons per a la superposició de la col · lecció.

és a dir,
En lloc d'alguna cosa com això

. Lighbox_overlay {
background-color: # ffffff;
z-index: 1001;
-Moz-opacity: 0.6;
opacitat: 0,60;
Filtre: alpha (opacity = 60);
}

És això ....

. Lighbox_overlay {
background: url (bkg.png) la repetició;
}

Per provar-ho, FACI CLIC AQUÍ! | descarregar, faci clic AQUÍ!

Si vostè està veient aquesta pàgina a l'Internet Explorer 8, llavors vostè ha de veure a un complet fons opac blanc darrere d'aquest missatge. Ahir, el meu col · lega va assenyalar això a mi (com jo sóc una d'aquelles persones que s'adaptin als canvis poc a poc i de manera constant ... en especial els navegadors. Podria dir, sóc un covard, però que així sigui .... Ser un desenvolupador d'interfície d'usuari, sempre estic merda de por de noves versions dels navegadors ... ja saps el que Im tlaking, no?)

Cavat al voltant per un temps, tractant de trobar una solució per arreglar i llavors, què ...
Aquesta vegada el nostre navegador TOT MOMENT FAVORIT ho ha fet de nou deixant caure tot el suport per l'opacitat CSS. La no-estàndard `filter: alpha (opacity = # #)` atribut CSS s'ha eliminat, Niça, però també es va oblidar per complet per afegir suport CSS3 opacitat (per exemple, com tot el navegador que està molt bé l'han mantingut en el). Així, per primera vegada des que Déu ens va dir sobre CSS opacitat (com IE 5.0, suposo), un navegador d'Internet no suporta l'opacitat CSS.
I ara, per la crema a la part superior: la paraula oficial de l'IE 8 l'equip? És "per disseny" i "anem a considerar això en una futura versió d'Internet Explorer".

PD: Intenta aquesta pàgina en FF, ho juro es veu bé!

Si alguna vegada has fet (o fer un) un menú vertical amb elements de la llista (li) i les etiquetes de CSS, pot trobar-se amb aquest altre error a Internet Explorer, IE 6, on s'insereix la bretxa entre els elements de la llista que contenen els elements block-level, és a dir, si hi ha algun espai en blanc entre els elements de la llista en el marcatge. Gràcies, però no, la versió d'Internet Explorer 7 sembla lliure d'aquest error.
Si com jo, i molts més, vostè pertany a aquest grup de desenvolupadors frustrats, que encara han d'aconseguir els seus nous dissenys, que treballen en IE6 també, llavors això podria resultar útil. ¡Fes un cop d'ull ...

Exemple de marcat:

<ul id="menu">
<li> <a href="#"> Inici </ a> </ li>
<li> <a href="#"> Sobre </ a> </ li>
<li> <a href="#"> Serveis </ a> </ li>
<li> <a href="#"> cartera </ a> </ li>
<li> <a href="#"> Ajuda </ a> </ li>
<li> <a href="#"> Contacti amb nosaltres </ a> </ li>
</ Ul>

Vostè pot crear una mica de CSS, similar a la de baix, per transformar la marge anterior en un menú vertical ....

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

Els resultats que vostè veurà ...

Solució per aquest error ... (modificat / afegit CSS en negreta i cursiva)

# Menu {
margin: 0; padding: 0; fons: # FF9900; list-style-type: none; ample: 150px;
float: left; / * això conté elements flotants de la llista * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Això fixa el * /
width: 100%; / * espai en blanc error en IE6 * /
}
# Menu {1
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Si la solució anterior doesnot sembla que funcionen (per raons conegudes només IE6) ... provar aquest mètode en lloc

Només ha d'afegir aquests altres estils només IE6 del seu marge de benefici ...

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

Nota IE 6, MSIE ha estat prou amable per als desenvolupadors de la interfície d'usuari mitjançant l'addició d'una mica més de les propietats CSS estàndard per a la majoria dels altres navegadors estàndard. Una d'aquestes propietats útils en "min-height". La propietat bastant senzill que no necessita explicació llarg alè. Quan un min-height d'una divisió s'estableix, es conserva sempre que l'altura de joc quan el contingut que alberga ocupa menys del que pot sostenir i això és important (a diferència del plain vanilla "altura" de la propietat) les escales o, dit d'CSS, es comporta com un la divisió de "altura" està ajustat a "auto" ...

Per a alguns de nosaltres els desenvolupadors de pobres, que encara es requereixen per al codi CSS que també han de treballar en IE6, sense disponibilitat de la "min-height", podria convertir-se en un tap de la demostració en algun moment ... la desesperació Donot.

Afortunadament, tenim prou peculiaritats de l'IE, que s'utilitzen en benefici de sortir i tallar el camí a través d'arribar al nostre objectiu ... és a dir, fer una divisió DIVISIÓ com si el seu min-height en IE6

Solució 1: Ús del Hack subratllat [ ... Llegir més ]

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

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

---

Solució 2: Utilitzar l'atribut CSS Selector de 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'atribut CSS Selector de Hack s'aprofita del fet dels navegadors IE6 abans del tha ignorat un atribut físic-selector. Tingueu en compte el requisit de l'altra divisió de contenidors amb class = "SomeClass". Només el presense l'atribut de classe d'aquesta divisió, anul · la la altura del suport automàtic per a Opera, Mozilla i MSIE7 i posteriors. IE6, que no és compatible amb els selectors d'atribut físic, l'ignora.

Veure demostració del truc min-height per IE6

En diverses ocasions, mentre que fa els dissenys de pàgina amb les divisions de popup / Caixes de Llum i consells, etc ens trobem amb situacions en què alguns objectes de formulari SELECT passa a ser en aquestes divisions POPUP, per disseny i es mostra a través de .... Ecs!

Bé! fàcilment es podria fer això ajustant els seus valors d'índex z adequadament per FF i IE7. No obstant això, Good Old (mai millor dit) IE6 no es comporta segons el que preveu .... El programa Select Box a través, fins i tot després d'aplicar algunes dràsticament alts valors d'índex z de la seva Divisió ... PopUp Xerraire!!

No hi ha solucions per aquest problema, però hi són, crec jo, més que una manera de treballar uns pocs-al voltant d'aquest problema, però sóc aquí per dir-los que la solució més senzilla que jo faig servir, que funciona bé per a mi, en la major part de la els casos ....

"Amaga la caixa de ROUGE SELECT quan es mostra la POPUP"

Simplement, en el fragment de seqüència de comandaments un cop mostrada la emergent, afegir un tros de seqüència de comandaments per establir la visibilitat de la caixa de selecció de "Ocult"

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

I recordi que retrocedir en el tancament de la Divisió de PopUp

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

on "my_select" és la identificació de la caixa de la irritació SELECT

Espero que això ajudi ...

PS. Hi ha per descomptat, són altres opcions com dinàmicament positionining un IFRAME (mateixa grandària que vostè PopUp) en el marc del DIV emergent ... Això funciona molt bé també, però amb una addició d'un munt d'elements DOM, scripts i mal de cap. He utilitzat aquesta solució també, i si vostè necessita qualsevol ajuda amb aquesta opció, em deixa saber. Us ajudarà!