Comment puis-je appliquer des règles CSS exclusivement à Google Chrome ?

Application de règles CSS spécifiques à Chrome exclusivement

Pour répondre au moteur de rendu unique de Google Chrome, il est souvent nécessaire d'appliquer des règles CSS exclusivement à lui. Un exemple consiste à ajuster la position d'un élément div.

Solution CSS :

En tirant parti des préfixes des fournisseurs, vous pouvez cibler les styles spécifiques à Chrome comme suit :

• Pour Chrome, Safari, Edge et Firefox :

@media screen and (-webkit-min-device-pixel-ratio:0) {
  div {
    top: 10px;
  }
}

• Pour Chrome 29 (prend en charge les valeurs DPI fractionnaires)

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  div {
    top: 0px;
  }
}

• Pour Chrome 22-28 :

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .selector {
    -chrome-only(top: 0px);
  }
}

Solution JavaScript :

Comme alternative au CSS, vous pouvez utiliser JavaScript pour détecter le navigateur Chrome et modifiez le style du div en conséquence :

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // Modify the div's top position here
}

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!