2011 7 juillet 2011
J'avais lu cela dans un certain blog ... pensé qu'il était bon de cataloguer ce pour réf avenir .... pourrait également être une question importante interview que vous a demandé un jour ....
Écrire un extrait de CSS qui permettra d'afficher un paragraphe en bleu dans les anciens navigateurs, rouge dans les navigateurs plus récents, vert et noir dans IE6 dans IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
aucun commentaire | tags: FF Hacks , Hacks IE | posté dans CSS
2008 10 octobre 2008
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
aucun commentaire | tags: les bogues d'IE , les corrections de IE , de Hacks IE , les questions d'IE | Publié dans Quirks navigateur , les CSS
2008 4 octobre 2008
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.
aucun commentaire | tags: les bogues d'IE , les corrections de IE , de Hacks IE , les questions d'IE | Publié dans Quirks navigateur , les CSS , les HTML
2008 20 juin 2008
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] ->
aucun commentaire | tags: les bogues d'IE , les corrections de IE , de Hacks IE , les questions d'IE , de IE6 , des didacticiels | Publié dans Quirks navigateur , CSS
2008 12 avril 2008
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
aucun commentaire | tags: les bogues d'IE , les corrections de IE , de Hacks IE , les questions d'IE , de IE6 , des didacticiels | Posté dans CSS
2008 15 mars 2008
À 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!
pas de commentaires | tags: les bogues d'IE , les corrections de IE , de Hacks IE , les questions d'IE , de IE6 | posté dans Quirks navigateur , les CSS , les HTML , javascript,
2008 8 janvier 2008
Quelques mois plus tôt, nous avons vu, comment nous pourrions inclure un morceau de CSS qui serait visible à IE6 seulement ( Pour votre IEs seulement ). Il ya d'autres façons de réaliser cela aussi. Il suffit d'inclure une CSS séparé, spécifique à votre IE cible. cela pourrait être réalisé avec ce qui est appelé comme des commentaires conditionnels.
Des commentaires conditionnels est un moyen de détecter le type de navigateur et la version. La détection du navigateur est effectuée pour s'assurer que le contenu présenté aux besoins spécifiques du navigateur. La détection du navigateur peut être fait en utilisant de nombreuses techniques différentes. Cette méthode présente plusieurs avantages par rapport aux méthodes antérieures, qui comprenaient de commutation de style en utilisant javascript. Pour lister quelques-uns importante, 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 plus récentes qui 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 de vartiations conditionnelles, lisez cette info sur le site MSDN:
À propos de commentaire conditionnel
aucun commentaire | tags: les bogues d'IE , les corrections de IE , de Hacks IE , les questions d'IE | Publié dans Quirks navigateur , les CSS , les HTML , javascript,
2007 8 septembre 2007
Si vous avez été écrit CSS pour tout, vous auriez l'expérience de ces moments où vous tirez vos cheveux littéralement quand vos mises en page CSS avait l'air bien dans tous les nouveaux navigateurs (je veux dire les navigateurs IE6 plus tard), mais IE 6 pique une colère. Vous batailler ferme 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 toute 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 les EI seulement. donc n'oubliez pas, une propriété CSS écrit avec le trait 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 bidouille
En outre, Le hack min-height pour IE6 utilise le hack de soulignement, consultez
2. Dièse (#) Hack: -
Comme le soulignent hack, celui-ci est trop est pour IEs oly, avec une bonne différence, les identificateurs de propriété précédés par # sur le début est visible pour toutes les versions d'IE, IE7 inclus et est invisible pour n'importe quel 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é bien faire preuve d'un navigateur croix alignement vertical solution, jeter un oeil à cet article pour en savoir plus à
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 l'un de ces hacks vous sauve la vie un jour, n'oubliez pas de me traiter à un café :)
aucun commentaire | tags: les bogues d'IE , les corrections de IE , de Hacks IE , les questions d'IE | Publié dans Quirks navigateur , les CSS , les javascript
2007 12 juillet 2007
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 passage de la souris de cette division transparente), IE n'a pas pour déclencher l'événement mouseover (a bien fonctionné dans FireFox).
Essayé plusieurs options ... beaucoup de ce qui était juste une tentative désespérée pour obtenir l'événement à déclencher dans IE. L'un des plus sensibles, que je pensais que peut-être travailler était de définir une couleur d'arrière-plan à 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é que je requise était de mettre un pixel on répétait / image de fond transparent dans cette division
... Silly! mais maintenant IE semble heureux.
aucun commentaire | tags: les bogues d'IE , les corrections de IE , de Hacks IE , les questions d'IE | Publié dans Quirks navigateur
2007 11 juin 2007
Simple ... Pour corriger ce problème d'affichage utilisation: 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, de gâcher la mise en page html / css. Pour résoudre ce problème il suffit d'ajouter display: inline; à votre élément flottant.
pas de commentaires | tags: les bogues d'IE , les corrections de IE , de Hacks IE , les questions d'IE , de IE6 | posté dans Quirks navigateur , CSS
