小攻城師的戰場筆記

今天接到一通客服電話，對方問我為什麼網站上部分網頁在列印時會印出 HTML。我仔細看了一下，那些頁面裡只要有設定超連結 <a href="/something">，就會把 href 屬性的值加上括號，顯示在連結文字之後。比方說：

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

在列印或預覽列印時會顯示：

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

因為用了 Chrome 39, IE 10, Firefox 34 看都有這狀況，本來以為是新版瀏覽器都有這個功能，但是嘗試預覽列印 Google 的搜尋結果，就沒這問題，好納悶。

後來 Google 了一下，在 "Need to remove href values when printing in Chrome" 這篇發現，是 BootStrap 搞的鬼，是因為 BootStrap 在 CSS 裡，為列印時的超連結加註了網址：

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

所以要在不希望這個效果發生的頁面，設定下列的 CSS 來反制它，把它取消掉：

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

如果全域都不想要出現網址列印，那就直接去網頁裡引用的 bootstrap.css 找出 "a[href]:after{content:" (" attr(href) ")"}" 這行把它幹掉就可以了～ 

相關連結

• How to hide href attribute of <A> tag via css when using window.print
• Need to remove href values when printing in Chrome