25

HTML メールをデザインしましたが、次の問題があります。まず、デザイン全体が青色をベースにしているため、青色のテキストは読者/ユーザーに読み取られず、テキストは白でなければなりません。GMAIL は電話番号とリンクを自動的に青色に色付けしますが、主な問題は Microsoft Outlook OWA です。

GMAIL の電話番号とリンクのカラーリングを修正するために、次のことを行いました。

<a style="color: #FFFFFF; 
   text-decoration: none" 
   href="#/">
       <span style="color: #FFFFFF; 
                    text- decoration: none">
           1800-000-0000
       </span>
</a>

これは GMAIL や他のすべての場所で完全に機能しますが、クライアントのほとんどが Outlook または MS OWA (Outlook Web Application) を使用していることを述べました。

OWA はインライン スタイルで設定した色を無視し、リンクをデフォルトの青にします。これは、電子メールがプレビューされている場合にのみ発生します。実際にメールを開くと、すべてのスタイルが有効になります。

私のジレンマは、どうすればいいですか？もう希望は捨てましたが、これが最後の手段です。Outlook OWA のリンクの色を上書きする方法はありますか? !IMPORTANT、FONT タグ、NESTING を 5 度使用しました。

ここでの問題は、Outlook ではなく OWA です。

Chrome で要素を検査したときのスクリーンショットを次に示します。

Google Chrome 開発者パネルのスクリーンショット

そしてここにFFがあります：

ここに画像の説明を入力

何か案は？

お願いします！

4

14 に答える 14

6

aタグ内にテーブルを配置することで、これを修正できました。

<a href="">
    <table>
        <tr>
            <td style="color: #FFFFFF">Link text here</td>
        </tr>
    </table>
</a>
于 2013-09-06T17:39:43.993 に答える
1

以下を使用しましたが、Outlook 2007、2010、2013、および Outlook.com で正常に動作しました。近々OWAに確認してみます。

#outlookLink {text-decoration: none; color: #ffffff !important}
<a href="" id="outlookLink" name="Anchor" style="text-decoration: none; color: #ffffff !important;">Your text and link here.</a>
于 2016-09-19T21:44:14.877 に答える
0

HTML メールを送信するときのベスト プラクティスは、古い HTML3 と HTML4 に固執することです。メール クライアントは、CSS2 以降ではうまく機能しません。インライン CSS のほうがはるかにうまく機能します。

それ以外の：

<a style="color: #FFFFFF; text-decoration: none" href="#/">
 <span style="color: #FFFFFF; text- decoration: none">1800-000-0000</span>
</a>

ところで、この行には構文エラーがあります。各 css 宣言の後に ; が必要です。

訂正:

<a style="color: #FFFFFF; text-decoration: none;" href="#">
  <span style="color: #FFFFFF; text- decoration: none;">1800-000-0000</span>
</a>

これを試して：

<a color="#FFFFFF" text-decoration="none" href="#">
  1800-000-0000
</a>

DOCTYPE で HTML バージョンを指定することを忘れないでください。

私は自分がこの状況の両側で働いていることに気づきました。私は IMAP で PHP を使用する Web ベースの電子メール クライアントに取り組んでいました。HTML 電子メールは、アプリのレイアウトだけでなく、ボタンやフォームの意図した動作も壊してしまうため、多くのものを削除する必要がありました。どのように？あなたは尋ねるかもしれません。デスクトップの電子メール クライアントでは、これはおそらく問題にはなりませんが、外部の css/js ファイルをロードする Web ベースの電子メール クライアントでは、非常に多くの潜在的な落とし穴や厄介なバグが発生する可能性があります。

別の機会に、私は HTMl 電子メールで送信される結婚式の招待状に取り組んでいました。実行しなければならなかったインライン CSS の量はばかげていました。それを機能させるには、ほとんど HTML3 を使用する必要があります。

テーブルと非推奨の HTML3 インライン CSS を試してみることをお勧めします。

于 2013-04-05T04:00:11.893 に答える
0

このスレッドを見て、上記のオプションを試しました。TD ハックは 16 進コードを変更することで機能しましたが、誰かが試してみたいと思っている場合は、良い解決策を見つけました。

<div style="text-decoration: none;">
<a href="LINK" style="display: inline-block; color: #878f93; text-decoration: none;">LINK TEXT</a>
</div>

DIV を text-decoration NONE に設定することは、OWA でサポートされていました。私は個人的に下線を削除するように求められたので、私の場合は完璧です.

人々がこれが役に立つことを願っています。ソリューションを追加してくれたすべての人にも感謝します。

于 2016-06-07T13:44:18.857 に答える
0

my-link問題の各リンクにクラスを追加し、styleタグに次の CSS を追加してみてください。

.my-link a,
a[x-apple-data-detectors] {
  color:inherit !important;
  text-decoration: underline !important;
}

それは通常、私にとって物事をカバーしています。それが失敗した場合、このコードのより重いバージョンがここにあります。

.my-link a,
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

ソース

于 2016-05-23T14:13:12.830 に答える
0

OWA は、実際には、含まれている span-tag のスタイルを含め、a-tag のすべてのスタイルを削除しています。head 部分にスタイルを追加できますが、OWA はハイパーリンクに対してこれを無視しています。a、a:link、a:visited のスタイルを head に追加し、a-tag と同じ色で、span-tag を含めました。結果？リンクテキストは色付きですが、下線はデフォルトの青のままです。手がかり：私には手がかりがありません。

于 2012-08-24T13:38:56.533 に答える