ページを印刷しようとすると後ろにリンクが表示される

      2017/11/06

サンプル

会社案内 (http://example.com/company)

こんな感じでウェブサイトを印刷しようとするとリンクの後ろにURLが勝手に表示される。

原因

twitter bootstrapのスタイルシート

@media print {
/* 省略 */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
/* 省略 */
}

対策

該当項目を削除するか、下記のCSSを優先的に読み込む様修正する。

@media print {
 a[href]:after {
 content: "" !important;
 }
 
 abbr[title]:after {
 content: "" !important;
 }
}

スマートフォン用のレイアウトが優先される

下記ページ参考
Render Bootstrap as "small" layout when printing

0

 - stylesheet