Twitter Bootstrapで作成したサイトを印刷しようとすると、リンクの後ろに勝手にリンク先URLが表示されました。
ユーザビリティ的なもので表示されるようにしているのかもしれませんが、今回は「見た目そのまま」のサイトを印刷したいという要望だったので、とっちゃいます。
原因
bootstrap.cssもしくは、bootstrap.min.cssに記述されている以下のCSS
bootstrap.cssの場合は183行目あたり
@media print { /* 省略 */ a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* 省略 */ }
印刷時に、a要素でhref属性がある場合は要素の後ろにリンク先URLが挿入される、という指定です。
対策
(1) 上記のCSS該当部分を削除する
(2) bootstrap.min.cssを読み込んでいて該当部分を探すのが面倒な場合は、最後の行か別のCSSファイルに以下を記述してCSSを打ち消す
@media print { a[href]:after { content: ""!important; } abbr[title]:after { content: ""!important; } }
最近のコメント