サイトを印刷すると、リンク先がずらずら出てくるずら。 原因はTwitterBootstrapでした。

サイトを印刷すると、リンク先がずらずら出てくるずら。 原因はTwitterBootstrapでした。

気づいていたんだけど、放置してた。

放置したら忘れてしまって、今日お客様に

お客様「なんかホームページ印刷したらいっぱい字が出てるんです~。」

と言われて「あ。」となった。

Bootstrapに違いないと思っていたやつだ。。。急いで調べよ。。。とググったら回答を発見した!

http://www.magical-remix.co.jp/magicalog/archives/2127

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

Bootstrapのこの部分がイケナイらしい。上記のHPを参考にして
わたしはとりあえずカスタムcssに打消しCSSを記載してアップ。

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

ずらずらと出ていたリンク先テキストは消えたので、お客様と電話しながら解決した。

文字化けで〼がでるのもそうだし、Bootstrapはこんな感じのひっかけ?があるので油断できない。

しかしこのずらずら文字を「便利」と言ってそのままでいいとおっしゃるお客様のいるので、さらに安心できない。

2015年はいい年にしたい私でした。

Twitter Bootstrap でサイトを作ったら IEでだけ文字がでかかった

Twitter Bootstrap でサイトを作ったら IEでだけ文字がでかかった

6月は祭日がないと気づいて毎年愕然とするわけですが、
今日はお客様のサイトメンテで、Bootstrapを入れたらIEで文字がでかすぎになってしまった件で解決方法を探しました。


body {
margin: 0;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}

bootstrap.css に変更を加えた。
これでかいけつした!日本語フォントがないとだった;