Le poisson-chat - Partie 1

Cet article explique comment créer une bannière publicitaire "de poisson-chat" persistant qui reste visible au bas d'une page Web même lors du défilement. La technique utilise une combinaison de CSS et JavaScript, avec une manipulation spéciale pour Internet Explorer.

Concepts clés:

• bannière inférieure persistante: La fonctionnalité de base est un élément div positionné en bas de la page en utilisant CSS (position: fixed).
• Compatibilité des navigateurs croisés: L'approche initiale CSS uniquement, en utilisant position: fixed, ne fonctionne pas dans des versions plus anciennes d'Internet Explorer. La solution implique des commentaires conditionnels et une manipulation DOM pour ajouter un div wrapper div (div#zip) uniquement pour IE. Ce wrapper utilise position: absolute pour la bannière et overflow: auto pour gérer le défilement dans l'emballage.
• Traitement spécifique à IE: Une fonction JavaScript personnalisée (wrapFish) injecte dynamiquement l'emballage div dans le DOM IE, assurant la compatibilité sans impact sur les autres navigateurs.
• Commentaires conditionnels: Ces commentaires permettent l'inclusion CSS et JavaScript spécifiques au navigateur. Cela garantit que seul IE reçoit le balisage supplémentaire nécessaire pour le correctif.
• Marquage efficace: La div supplémentaire et les styles associés ne sont ajoutés que pour Internet Explorer, en évitant le ballonnement inutile pour les autres navigateurs.

Extraits de code:

Les extraits de code suivants illustrent le CSS et le JavaScript utilisés. Notez qu'il s'agit d'une version simplifiée pour la démonstration.

catfish.css:

#catfish {
  position: fixed;
  bottom: 0;
  background: transparent url(images/catfish-tile.gif) repeat-x left bottom;
  padding: 0;
  height: 79px; /* includes transparent part */
  cursor: pointer;
  margin: 0;
  width: 100%;
}

html {
  padding: 0 0 58px 0; /* 58px = height of the opaque part of the Catfish */
}

IEhack.css:

div#zip {
  width: 100%;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: auto;
  position: relative;
}

catfish.js:

function wrapFish() {
  // ... (JavaScript code to wrap the content in div#zip for IE) ...
}

Commentaires conditionnels (exemple):

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="IEhack.css">
  
  
<![endif]-->

Cette approche assure une expérience utilisateur cohérente entre les navigateurs tout en minimisant le code inutile. D'autres raffinements, tels que la sélection des bannières conditionnels et le contrôle du placement, amélioreraient la fonctionnalité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!