L'exprimer

Temps et plus encore, quand tous les autres navigateurs vus se comporter comme dit par les règles du W3C, des spirales IE vous sortir de l'esprit de développement par piquer une colère, qui ne semble pas d'avoir une solution. Juste un tel homme est cette question dans IE7.

Énoncé du problème:
I et donc peut-être la plupart des autres développeurs web sérieux ont remarqué plus d'une fois, que quand il imbriqués flotteurs dans la mise en page, sur hover sur certains liens (balises d'ancrage), le récipient contenant semble se déplacer de quelques pixels vers la droite . J'ai essayé de solutions Google pour cette question, mais n'ont guère trouvé de réponse raisonnable pour savoir pourquoi et quand il se produit (qui pourrait aider à éviter ce problème de se produire), donc je n'ai jamais trouvé une solution claire au problème non plus ...

Solution possible:
Sur l'expérience, j'ai pour cent préavis de 90% de la c.-à-temps, que ce problème est résolu en ajoutant une propriété de zoom dans la définition CSS du conteneur mal se comporter ...

 # {Somediv
       zoom: 1;
 }

nouveau les raisons sont ambigus ... essayez ce ...
Certains éléments dans IE ont un "hasLayout" la propriété, qui est "vrai" par défaut. De nombreux visuels comportements CSS: par exemple, un filtre alpha ne fonctionne que sur un élément qui hasLayout. et le {zoom: 1} semble donner des éléments cibles de la propriété hasLayout .... Utile? Je ne crois pas ...

La propriété zoom est semble également pris en charge par Chrome, mais sa force l'utilisation semblent faire beaucoup d'effet négatif sur ma page ... l'essayer, Si ça marche pour vous ... si ce n'est pas, marquer cette page sous "craps CSS"

Google commence un peuple mouvement rapides pour vider IE6 ... Par les utilisateurs écoutes IE6, avec un POPUP la page de chargement ... peut-être pas une très bonne idée ... mais étant un développeur interface utilisateur, je dois rejoindre ce train en marche ... un de moins pour moi navigateur s'inquiéter Désolé ... il est égoïste! mais je n'ai inclure cette javascript ... (TRY THIS PAGE DANS IE6) ...
Hey! et sur ​​la note plus ... Voir l'article est un affichage de la puissance de JavaScript .... il peut même faire tomber un géant (ou une fois qu'il a été)

SO ... Aide débarrasser le monde d'IE6 avec une ligne de javascript!

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

Si vous êtes une personne css, vous savez la douleur à obtenir vos mises en page de travail multi-navigateur. IE8 est encore un autre bâton dans les roues pour les développeurs nous. Anywaz! si vous frappez sur cette question, comme je l'ai fait hier, où votre parfait état de fonctionnement CSS dans IE7 (et précédentes) et Firefox a soudainement commencé à jeter des crises de colère dans IE8, essayez ceci ... Il semblait bien pour corriger mes problèmes pour le moment ....

Utilisation de la déclaration Meta, nous pouvons spécifier le moteur de rendu, nous aimerions utiliser IE8. Donc, pour forcer IE8 à rendre aussi IE7 ... Insérez la balise META suivante dans la tête de votre document: -

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

Par défaut Meta IE serait: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
ce qui rendrait IE8 afficher la page en utilisant le nouveau mode de normes.

Si nécessaire, cette syntaxe peut être utilisé pour accueillir d'autres navigateurs comme ci-dessous:

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

PLUS A propos de DOCTYPEs:

SI vous êtes encore peu familier avec le genre de l'animal appelé "Doctype" ... voici quelques lecture rapide
Quels sont DOCTYPEs? Quels sont Quirks Navigateur & Mode Strict?
Réglage de la DOCTYPE en XSL

Pour une compréhension plus approfondie sur DOCTYPEs, essayez de visiter ces liens ...
A List Apart: Fixer votre site avec le DOCTYPE droit!
A List Apart: Au-delà de DOCTYPE: Web Standards, la compatibilité ascendante, et IE8

Remarque: Bien que beaucoup d'entre nous HTML / CSS personnes ont été négligeant l'importance de Decleration DOCTYPE dans nos documents, Réglage de la DOCTYPE droite, est généralement la réponse aux questions les plus transversales du navigateur.

CSS pour navigateurs non-IE: Son pas de nouvelles pour les développeurs CSS, les sélecteurs CSS enfants comme dans l'exemple ci-dessous, ne semblent pas fonctionner dans IE.

par exemple div> span {} un peu de CSS, qui signifie «quand un élément span est un enfant (et non pas un petit-enfant ou un grand grand enfant, etc) d'un élément de division".

Mais nous avons utilisé cette CON à notre avantage. Historiquement, le sélecteur d'enfant a été utilisé pour masquer des commandes CSS d'IE. Suffit de placer html>body en face de toute IE CSS commande de l'ignorer:

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

Cela fonctionne parce que <body> est toujours un enfant de <html> - il ne peut évidemment jamais être un petit-enfant ou arrière petit-fils de <html> .

Maintenant que IE 7 comprend le sélecteur d'enfant, vous devez insérer une balise de commentaire vide dans directement après le signe supérieur à IE 7 ne sera donc pas comprendre ce sélecteur (qui sait pourquoi?) Et sera donc totalement ignorer cette commande CSS.:

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

Si n'avez pas encore vu ces derniers avant, avoir une lecture par les moyens suivants ainsi

• Des commentaires conditionnels: Pour votre IEs Seul-partie Duex
• CSS hack: Javascript, CSS, HTML pour Firefox uniquement
• Pour votre IEs seulement

Comme d'habitude, l'un des nombreux certains problèmes étranges avec IE et celui-ci doit se classe dans TOP 10 de l'émission Quirks IE.

Énoncé du problème (Ce fut mon problème, peut-être vous avez les dysfonctionnements similaires):
J'ai beaucoup DIV est dans la page avec la classe "sectionhead", qui n'est rien d'autre titre d'une section sur la page. Donc, j'ai un peu de style qui ressemble à ceci

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

Le div est un bar gris clair avec un texte noir. Qu'est-ce qui se passe dans IE est une de ces têtes de section sont affichés ok, mais certains sont invisibles jusqu'à ce que, vous faites défiler la page ou cliquez sur quelque chose sur la page, etc Parfois, ils ont tendance à disparaître lorsque vous cliquez sur le 'alt' clé lorsque vous page vers le bas ou faites défiler avec la barre de défilement. Ils semblent parfois réapparaître lorsque vous rechargez (f5) la page. Je courte DIV parfaitement simple avec un peu style simple se comporte BAD.
Ce qui pourrait causer un tel comportement erratique? Eh bien! Franchement, aucune idée!

SOLUTION POSSIBLE:
Encore une fois ne me demandez pas pourquoi, mais dans de nombreux cas ce problème tend à disparaître lorsque vous ajoutez position: relative à la mission comporte éléments de style, comme celui-ci

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

Étrange, mais ce à dire? Dieu Bénis-moi à partir d'IE!

ET FAIRE PARTAGER AVEC NOUS, si vous aviez des problèmes similaires.

Oh Well! Dans le post précédent il ya quelques jours concernant l'opacité dans IE8, j'ai oublié de mentionner un point important que "IE 8 en mode strict ne permet pas de CSS opacité».
Pour ceux qui donot comprendre ce que je veux dire par le mode strict, ici, c'est rapide tutoriel .

Un travail autour de cette (Avant IE dev équipe se rendent compte qu'ils ont ouvert la voie à re-travail des routines dans le monde entier, pour les sites web utilisant Pop-up visionneuses avec une certaine opacité, et remettre un soutien pour l'opacité) est d'utiliser un semi-transparent image ... de préférence au format PNG (j'ai eu une mauvaise expérience se les images GIF transparentes de travailler comme ils étaient censés le faire). Créer une image PNG de la couleur et le pourcentage de transparence que vous voulez, en vous éditeur d'image favori et l'utiliser comme une image de fond pour votre superposition visionneuse.

c.-à-
Au lieu de quelque chose comme ceci

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

Pour ce faire, ....

. Lighbox_overlay {
background: url (bkg.png) répétition;
}

Pour l'essayer, CLIQUEZ ICI! | Pour télécharger, cliquez ICI!

Si vous visualisez cette page dans IE8, alors vous devez être voir un plein fond blanc opaque derrière ce post. Hier, mon collègue fait remarquer à moi (Comme je suis une de ces personnes qui s'adaptent aux changements lentement et régulièrement ... en particulier les navigateurs. Pourrait-on dire, Je suis un lâche, mais ainsi soit-il .... Etre un développeur interface utilisateur, je suis toujours merde peur de nouvelles versions des navigateurs ... vous savez ce que Im tlaking, non?)

Creusé autour de tout, en essayant de trouver une solution pour le réparer et puis ce que ...
Cette fois, notre navigateur ALL TIME FAVORITE a fait une fois de plus par une chute tout le soutien pour l'opacité CSS. Le non-standard `filter: alpha (opacity = # #)` attribut CSS a été enlevé, Nice, mais ils ont aussi tout à fait oublié d'ajouter l'opacité CSS3 soutien (comme la façon dont tous les autres navigateurs est bien l'ont gardé en). Ainsi, pour la première fois depuis que Dieu nous a parlé de l'opacité CSS (depuis IE 5.0, je suppose), un navigateur web ne supporte pas l'opacité CSS.
Et maintenant, pour la crème sur le dessus: mot officiel de l'équipe IE 8? Il s'agit de "by design" et "nous allons examiner cela dans une future version de IE".

PS: Essayez cette page dans FF, jure qu'il a l'air soigné!

Si vous avez déjà fait (ou en faisant un) un menu vertical à l'aide des éléments de liste (li) et les balises CSS, vous pourriez rencontrer, ce encore un autre bug dans Internet Explorer, IE 6 inserts où ces écarts entre les éléments de la liste qui contiennent des éléments de niveau bloc, à-dire s'il n'y a aucun espace entre les éléments de liste dans le balisage. Merci, mais non merci, la version d'IE 7 semble exempt de ce bug.
Si comme moi, et beaucoup d'autres, vous appartenez à ce groupe de développeurs frustrés, qui ont encore pour obtenir leurs nouvelles dispositions, qui travaillent dans IE6 trop, alors cela pourrait se révéler utile. Jetez un oeil ...

Balisage de l'échantillon:

<ul id="menu">
<li> <a href="#"> Accueil </ a> </ li>
<li> <a href="#"> propos </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> portefeuille </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Contactez-nous </ a> </ li>
</ Ul>

Vous pouvez créer un peu de CSS, similaire à celui ci-dessous, à transfrom le balisage ci-dessus dans un menu vertical ....

Exemple de CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; largeur: 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 solide # FFF;
}

Les résultats vous verrez ...

Solution pour ce bogue ... (modifié / ajouté CSS en gras et italique)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; largeur: 150px;
float: left; / * contient cette liste des articles flottants * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Ceci fixe le * /
largeur: 100%; / * espaces bug dans IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solide # FFF;
}

Si la solution ci-dessus doesnot semble pas fonctionner (pour des raisons connues d'IE6 seulement) ... essayer cette méthode au lieu

Il suffit d'ajouter cette supplémentaires IE6 seuls styles à votre balisage ...

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

Poster IE 6, MSIE a été assez aimable pour nous développeurs d'interface utilisateur en ajoutant quelques autres propriétés CSS standard pour la plupart des autres navigateurs standard. Un tel bien utile dans "min-height". Propriété assez simple qui ne nécessite aucune explication de longue haleine. Quand un min-height pour une division est défini, il conserve toujours cette hauteur ensemble lorsque le contenu qu'il abrite occupe moins que ce qu'il peut contenir et surtout (contrairement à la vanille "hauteur" plaine de propriété) des échelles ou des mots CSS, il se comporte comme un division dont le "hauteur" est réglé sur "automatique" ...

Pour certains d'entre nous pauvres développeurs, qui sont encore nécessaires pour code CSS qui doit également travailler dans IE6, non-disponibilité de la «min-height", pourrait se révéler un show stopper parfois ... désespoir Donot.

Heureusement, nous avons assez de bizarreries dans IE, que nous devons utiliser au mieux les pirater et notre chemin à travers pour atteindre notre objectif ... à savoir faire une division DIVISION comme si son min-height dans IE6

Solution 1: Utilisation du Hack de soulignement [ ... Lire la suite ]

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

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

---

Solution 2: Utilisation de l'attribut 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'attribut CSS Selector Hack prend avantage du fait des navigateurs antérieurs IE6 tha ignoré une atribute-sélecteur. Note à l'exigence d'une autre division des conteneurs avec class = "someclass". Juste le presense de l'attribut class pour cette division, l'emporte sur la hauteur du dossier à l'auto pour Opera, Mozilla et MSIE7 et plus tard. IE6, qui ne prend pas en charge les sélecteurs atribute, il ne tient pas compte.

Voir la démo du hack min-height pour IE6

À plusieurs reprises, tout en faisant des mises en page avec les divisions Popup / visionneuses ou Conseils etc, nous rencontrons des situations où certains objets de formulaire SELECT se trouve être en vertu de ces divisions POPUP, de par leur conception et il montre à travers .... Berk!

Eh bien! vous pourriez facilement résoudre ce en ajustant vos valeurs de z-index de façon appropriée pour FF et IE7. Mais Good Old (pun intended) IE6 ne se comporte pas comme prévu .... Le spectacle BOX SELECT travers, même après avoir appliqué de façon drastique certaines hautes valeurs de z-index de votre division PopUp ... Bummer!!

Il n'ya pas de solution pour ce problème, mais il ya, je crois, plus que d'une manière quelques-uns à travailler-contourner ce problème, Mais Im ici pour vous dire la solution la plus simple que j'utilise, qui fonctionne très bien pour moi, dans la plupart des cas ....

"Cacher la boîte ROUGE SELECT Lorsque vous affichez la POPUP"

Tout simplement dans votre extrait de script où vous montrez votre popup, ajouter un morceau de script pour définir la visibilité de la boîte de SELECT pour "Caché"

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

Et n'oubliez pas de le remettre sur CLOSE de votre division PopUp

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

où "my_select" est l'ID de la boîte de l'irritation SELECT

Hope this helps ...

PS. Il ya d'autres options comme ofcourse dynamiquement positionining un IFRAME (même taille que vous PopUp) en vertu de la DIV Popup ... Cela fonctionne bien aussi, mais avec une addition de charges d'éléments DOM, des scripts et maux de tête. J'ai utilisé cette solution trop, et si vous avez besoin d'aide pour cette option, ne faites le moi savoir. Se fera un plaisir de vous aider!