2008 8 janvier 2008

Des commentaires conditionnels: Pour votre IEs Seul-partie Duex

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


2007 9 septembre 2007

IE 6 Problèmes location.href

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

Si vous avez ajouté une fonction onclick à votre balise d'ancrage comme ci-dessous ...

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

Avec une fonction comme ça ...
fonction onclickLink (id) {
var URI = "test2.html id =?" + id;
window.location.href = URI;
}

Pour votre ironie, vous remarquerez que tel un morceau de script simple refuse de travailler dans IE ... Eh bien! Je ne peux discuter des raisons ici, mais pense pas que ce sera utile ... 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 vers le nouvel emplacement </ a>

Si vous les réponses simples, s'il vous plaît écrivez un commentaire. Il va vraiment être appretiated, je parie que, par beaucoup!


2007 8 septembre 2007

Pour votre IEs seulement

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é :)


NDK la maison | Exprimant IT | Bouche Exprimant | Penmenship Exprimant | Awe Exprimant | m'exprimer