3

I've created a responsive HTML email which works fine across many different platforms except when viewed on iPhone.

It seems that iOS is recognising a date + time and applying a blue colour/underline to the content. I've researched this issue for the past couple hours and am at a dead end.

I've tried turning format detection off for phone numbers:

<meta name="format-detection" content="telephone=no">

I've tried including date and address in this too:

<meta name="format-detection" content="telephone=no, date=no, address=no">

I've tried adding !important to the styles on the element with still no luck:

<h4 style="font-size: 16px;color: #FFFFFF !important; text-decoration:none !important;font-family: Arial;font-weight: bold;padding: 0;margin: 0;text-align: left;line-height: 1.3;word-break: normal;" class="appleLinksWhite">
    Thursday 20th November
</h4>

<p style="color: #FFFFFF !important; text-decoration:none !important;margin: 0;margin-bottom: 0;font-family: Arial;font-weight: normal;padding: 0;text-align: left;line-height: 19px;font-size: 14px !important;" class="appleLinksWhite">
    10:45am until 12:30pm,<br>The Feast, Suffolk Food Hall, Ipswich
</p>

I've tried adding a class to the elements .appleLinksWhite as recommended here which still did not do the trick.

I have also tried wrapping the inner contents in a <span> with the colour and text-decoration set and this still didn't work.

I'm at a loss for other things to try. How can I disable this behaviour?

Edit* It's worth noting that the issue is only with iPhone 4/5. iPhone 6/Plus are fine.

2 Answers 2

9

This will eliminate the blue+underline styling (tested on iPhone 5, iOS 8.3):

a[href^="x-apple-data-detectors"] {
    color: inherit !important;
    text-decoration: inherit !important;
}
1
  • 1
    This works! I did have to make the styles !important and omit the : to make it work, a[href^="x-apple-data-detectors"]{ color: inherit !important; text-decoration: inherit !important; } thank you, @Christian. Jan 25, 2016 at 22:46
2

I managed to get this working by tricking the date detection algorithm into thinking it's not dealing with a date by inserting a zero width &#8203; character in between my date/time strings e.g:

<h4 style="font-size: 16px;color: #FFFFFF !important; text-decoration:none !important;font-family: Arial;font-weight: bold;padding: 0;margin: 0;text-align: left;line-height: 1.3;word-break: normal;" class="appleLinksWhite">
    Thursday&#8203; 20th&#8203; November&#8203;
</h4>

<p style="color: #FFFFFF !important; text-decoration:none !important;margin: 0;margin-bottom: 0;font-family: Arial;font-weight: normal;padding: 0;text-align: left;line-height: 19px;font-size: 14px !important;" class="appleLinksWhite">
    10:45am&#8203; until&#8203; 12:30pm&#8203;,<br>The Feast, Suffolk Food Hall, Ipswich
</p>
1
  • This fix works but instead of &#8203; I had to use &zwnj; changing 11:00​‌AM​​-11:30‌​AM​​ ET to 11&zwnj;:&zwnj;00&zwnj;‌AM&zwnj;-11&zwnj;:&zwnj;30‌&zwnj;AM&zwnj; ET Dec 7, 2021 at 21:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.