Nécessité de supprimer les valeurs des href lors de l'impression dans Chrome

Question

J'essaie de personnaliser le CSS d'impression, et je trouve qu'il imprime les liens avec la balise href ainsi que le lien.

C'est dans Chrome.

Pour ce HTML :

<a href="http://www.google.com">Google</a>

Il imprime :

Google (http://www.google.com)

Et je veux que ça s'imprime :

Google

Answer 1

Bootstrap fait la même chose (... comme la réponse sélectionnée ci-dessous).

@media print {
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

Il suffit de le supprimer ou de le remplacer dans votre propre feuille de style d'impression :

@media print {
  a[href]:after {
    content: none !important;
  }
}

Answer 2

Ce n'est pas le cas. . Quelque part dans votre feuille de style d'impression, vous devez avoir cette section de code :

a[href]::after {
    content: " (" attr(href) ")"
}

La seule autre possibilité est que vous ayez une extension qui le fasse pour vous.

Answer 3

@media print {
   a[href]:after {
      display: none;
      visibility: hidden;
   }
}

Le travail est parfait.

Answer 4

Si vous utilisez le CSS suivant

<link href="~/Content/common/bootstrap.css" rel="stylesheet" type="text/css"    />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" type="text/css" />

il suffit de le changer en style suivant en ajoutant media="écran"

<link href="~/Content/common/bootstrap.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" **media="screen"** type="text/css" />

Je pense que ça va marcher.

les premières réponses comme

    @media print {
  a[href]:after {
    content: none !important;
  }
}

n'ont pas bien fonctionné dans le navigateur de chrome.

Answer 5

J'ai rencontré un problème similaire, mais avec un img imbriqué dans mon ancre :

<a href="some/link">
   <img src="some/src">
</a>

Quand j'ai appliqué

@media print {
   a[href]:after {
      content: none !important;
   }
}

J'ai perdu mon img et toute la largeur de l'ancre pour une raison quelconque, donc à la place j'ai utilisé :

@media print {
   a[href]:after {
      visibility: hidden;
   }
}

ce qui a parfaitement fonctionné.

Conseil bonus : inspecter l'aperçu avant impression