Необходимо удалить значения href при печати в Chrome.

Я пытаюсь настроить CSS для печати и обнаруживаю, что он печатает ссылки со значением href, а также ссылкой.

Это в Chrome.

Для этого HTML:

<a href="#" onclick="location.href='http://www.google.com'; return false;">Google</a>

Он печатает:

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

И я хочу, чтобы он печатался:

Google

Ответы

Ответ 1

Bootstrap делает то же самое (... как выбранный ответ ниже).

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

Просто удалите его или переопределите в своей собственной таблице стилей печати:

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

Ответ 2

Это не. Где-то в вашей таблице стилей печати вы должны иметь этот раздел кода:

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

Единственная другая возможность - у вас есть расширение, сделанное для вас.

Ответ 3

Если вы используете следующий CSS

<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" />

просто измените его на следующий стиль, добавив media = "screen" 

<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" />

Я думаю, что это сработает.

предыдущий отвечает как

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

не были хорошо обработаны в режиме просмотра хрома.

Ответ 4

У меня была такая же проблема, но потому, что я использовал Boilerplate HTML5, и у нее есть правило, которое Эрик разместил в запросе media.css для печати. Просто удалите его оттуда.

Ответ 5

Я столкнулся с аналогичной проблемой только с вложенным img в моем якоре:

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

Когда я применил

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

По какой-то причине я потерял img и всю ширину привязки, поэтому вместо этого я использовал:

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

который работал отлично.

Бонусный совет: проверить предварительный просмотр превью