L'exprimer

Si vous consultez cette page dans IE8, alors vous devez être voir un fond opaque pleine blanc derrière ce post. Hier, mon collègue fait remarquer à moi (comme je suis un de ceux qui s'adaptent aux changements lentement et régulièrement ... surtout les navigateurs. Pourrait dire, Im un lâche, mais tant pis .... Être un développeur interface utilisateur, je suis toujours merde peur de nouvelles versions des navigateurs ... vous savez quoi je parle, non?)

Creusé autour pour tout, en essayant de trouver une solution pour y remédier et puis quoi ...
Cette fois, notre navigateur TOUS LES TEMPS FAVORIS l'a fait tout recommencer en laissant tomber tout le soutien de l'opacité CSS. Le non-standard `filter: alpha (opacity =##)` CSS attribut a été supprimé, de Nice, mais ils ont aussi totalement oublié d'ajouter l'opacité CSS3 soutien (comme la façon dont tous les autres navigateurs très joliment ont gardé dans). 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 d'IE 8? C'est «par conception» et «nous allons considérer cela dans une future version d'IE".

PS: Essayez cette page dans FF, il semble soignée jure!

Si vous avez jamais fait (ou en faisant un) un menu vertical à l'aide des éléments de liste (li) des balises et CSS, vous pourriez rencontrer, ce bug encore une autre dans Internet Explorer, où IE 6 insère ces écarts entre les éléments de la liste qui contiennent des éléments de niveau bloc, à savoir 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 exempte de ce bug.
Si comme moi, et beaucoup plus, vous appartenez à cette bande de développeurs frustrés, qui ont encore pour obtenir leur mise en page nouvelle, travaillant dans IE6 aussi, alors ce pourrait s'avérer utile. Jetez un oeil ...

Exemple de balisage:

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

Vous pouvez créer des CSS, similaire à celui ci-dessous, pour 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 {un affichage: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Les résultats, vous verrez ...

Solution à ce bug ... (modifié / ajouté CSS en gras et italique)

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

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

Il suffit d'ajouter cette supplémentaires IE6 styles seulement pour votre balisage ...

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

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

Eh bien! vous pourriez facilement résoudre ce problème en ajustant votre Z-INDEX valeurs appropriée pour FF et IE7. Mais Good Old (pun intended) IE6 ne se comportent pas comme prévu .... Le spectacle boîte de sélection à travers, même après avoir appliqué une certaine façon drastique haute Z-INDEX valeurs à votre division PopUp ... cool!!

Il n'ya pas de solution pour ce problème, mais il ya, je crois, plus que d'une façon peu de travail autour de 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 sélection de "Caché"

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

Et n'oubliez pas de le remettre sur la fin 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 ofcourse d'autres options comme dynamique positionining un IFRAME (même taille que vous PopUp) sous la DIV Popup ... Cela fonctionne bien aussi, mais avec un ajout de charges d'éléments du DOM, les scripts et les céphalées. J'ai utilisé cette solution aussi, et si vous avez besoin d'aide pour cette option, ne laissez-moi savoir. Seront heureux de vous aider!

Quelques mois plus tôt, nous avons vu, comment nous pourrions inclure un morceau de CSS qui serait visible à IE6 seulement ( Pour votre Seuls des EI ). Il ya d'autres façons d'atteindre cet objectif aussi. Il suffit d'inclure un fichier CSS séparé, spécifique à votre IE cible. cela pourrait être réalisé avec ce qui est appelé comme commentaires conditionnels.

Commentaires conditionnelle est un moyen de détecter le type et version du navigateur. La détection du navigateur est effectuée pour s'assurer que le contenu présenté aux spécificités du navigateur. La détection du navigateur peut être fait en utilisant de nombreuses techniques différentes. Cette méthode a plusieurs avantages par rapport aux méthodes précédentes, qui comprenait de commutation de style en utilisant javascript. Pour lister quelques importants, serait;

• Scripting n'est pas nécessaire
• Cross-browser

Comment pouvons-nous faire cela?

Faites quelque chose dans IE 5 seulement
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Faites quelque chose dans toutes les versions d'IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Faites quelque chose dans toutes les versions d'IE récents que IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

Pour plus d'vartiations conditionnelle, lire cette info sur le site MSDN:
A propos de commentaire conditionnel

Avez-vous remarqué, parfois, comment les choses simples refuse simplement de travailler dans IE6 ... location.href est juste une telle chose.

Si vous avez ajouté une fonction onclick à votre tag ancre comme ci-dessous ...

<a href="javascript:void(0);" onclick="onClickLink('xxx');"> aller au nouvel emplacement </ a>

Avec une fonction comme celle-ci ...
Fonction onclickLink (id) {
var URI = "test2.html id =?" + id;
window.location.href = URI;
}

Pour votre ironie, vous remarquerez que ce morceau de script simple refuse de travailler dans IE ... Eh bien! Je peux discuter des raisons ici, mais ne pense pas que ce sera intéressant ... Bien, je ne semble pas avoir une solution ... (je parie que si vous comprenez le Javascript, vous comprendrez pourquoi nous ajoutons ce tweak pour IE6)

La solution

<a href="javascript:void(0);" onclick="onClickLink('xxx'); retour false; "> aller au nouvel emplacement </ a>

Si vous toutes les réponses simples, s'il vous plaît ne écrire un commentaire. Il sera vraiment appretiated, je parie que, par beaucoup!

Si vous avez été écrit CSS pour tout, vous auriez l'expérience de ces moments où vous tirez vos cheveux littéralement lorsque votre mise en page CSS regardé très bien dans tous les nouveaux navigateurs (je veux dire plus tard que les navigateurs IE6), mais IE 6 pique une colère. Vous dur combat pour ajuster votre CSS, mais il ne fonctionne pas ... Eh bien! Essayez ces hacks ...

1. Soulignons Hack: -
Par définition, spécification CSS 2.1 permet de soulignement ("_") dans les identificateurs CSS. Mais de nombreux navigateurs semblent encore ignorer les identifie procédé à un trait de soulignement, mais IE. Ce bug d'IE / fonction devient ainsi une façon très claire pour définir les propriétés CSS pour IES seulement. Donc n'oubliez pas, une propriété CSS écrit avec le caractère de soulignement sur ​​le début est visible pour Internet Explorer (toutes versions mais IE 7)

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

Vue de cette manifestation soulignent hacker

Aussi, le hack min-height pour IE6 utilise le hack de soulignement, consulter

2. Dièse (#) Hack: -
Comme le hack de soulignement, celui-ci est trop pour IES Oly, avec une différence de bon, avec des identificateurs de propriété précédée # sur le début est visible pour toutes les versions d'IE, IE7 inclus et est invisible pour tout autre navigateur standard.

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

Ce hack a été utilisée pour démontrer gentiment un navigateur croix verticale aligner solution, jeter un oeil à cet article pour en savoir plus long

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

Ces hacks semble envoyé du ciel, quand rien ne fonctionne ... Si aucune de ces hacks vous sauve la vie un jour, n'oubliez pas de me traiter d'un café:)

J'ai eu ce problème où, si vous aviez un événement mouseover sur une division (DIV) et que la division, pour une bonne raison devait être transparent (comme dans mon cas, où il a été nécessaire pour afficher certaines balises sur une image sur le mouseover des cette division transparente), IE a échoué à déclencher l'événement mouseover (a fonctionné très bien dans FireFox).

Essayé plusieurs options ... beaucoup de ce qui était juste une tentative désespérée pour obtenir l'événement pour le feu dans IE. L'un des plus sensible, que je pensais que peut-être le travail était de définir une couleur de fond à la division et réglez l'opacité à zéro ... Eh bien! A force de travail!

La solution finale qui semblait à travailler et à ne pas perturber la fonctionnalité j'avais besoin était de mettre une image d'un pixel de fond répétée / transparent dans cette division

... Idiot! mais maintenant, IE semble heureux.

Simple ... Pour corriger ce problème d'affichage utilisent: inline.

div {float:left;margin:40px;display:inline;}

Si vous avez un élément flottant comme un div et que vous placez la marge droite ou de margin-left sur cet élément, Internet Explorer 6.0 va doubler cette valeur de marge, gâcher le html / css layout. Pour résoudre ce problème d'affichage il suffit d'ajouter: inline; à votre élément flottant.