2

このサイトでは、携帯電話番号が表示される右上隅に携帯電話用の電話番号へのリンクがあります。デスクトップでこのリンクをクリックすると、Chrome はリンクを無視しますが、Firefox と Internet Explorer はエラー ページにリダイレクトします。

HTML:

<a href="tel:+491796737741" class="contact-info" ></a>

CSS:

#header .contact-info { width: 293px; height: 133px; display: block; float: right; cursor: pointer; background: url(contact-info.png) 0 0 no-repeat transparent; margin-right: 20px; margin-top: 110px; }

どうすればこれを修正できますか?

4

2 に答える 2

4

このドイツ語のブログでは、CSS3 対応のブラウザーで動作する優れた回避策を紹介しています。まず、tel:リンクをデフォルトで通常のテキストのように表示します。

a[href^="tel"]:link,
a[href^="tel"]:visited, 
a[href^="tel"]:hover {
    text-decoration:    none;
    color: #000;
}

次に、リンクのようなスタイルを適用しますが、モバイル デバイスのみで使用します。

@media only screen and (max-device-width: 480px) {
  a[href^="tel"]:link,
  a[href^="tel"]:visited,
  a[href^="tel"]:hover {
      text-decoration:    underline;
      color: blue;
   }
}

これにはいくつかの注意事項があります。

  • 古いデスクトップ ブラウザ (IE7 など) では動作しません。 (CSS3ビットに依存するのではなく) すべてのブラウザで動作するには、各tel:リンクに固有のものを指定する必要があります。classhref^="tel"

  • リンクの動作を削除するわけではなく、少し非表示にするだけです。もちろん、デフォルトでモバイルデバイスにtel:設定することで、リンクを簡単に完全に非表示にすることもできますdisplay: nonedisplay: inline

  • tel:電話番号を処理できるかどうかに関係なく、どのモバイル デバイスでもリンクが表示されます。

于 2013-06-30T13:59:06.953 に答える