ePubs, iBooks, Kindle - Footnote, Drop Caps, inline icons?

I've been trying to find way to add an icon for reference footnotes inside paragraphs and sentences. Liz Castro covered some corner cases for iBooks. But it involves wrapping img with a div. The problem is that this causes problems when your image should be inside a p tag.

What I want is to be able to add an icon inside a paragraph and sometimes in between a paragraph (i.e. display:inline-block). The icon ideally should be able to resize based on the reader's current font-size setting (i.e. the use of "em" instead of absolute pixels number). The solution needs to be cross-platform  - so the same ePub/mobi source file would work on iBooks, Kindle e-Ink, Kindle Fire, etc.

Here is my current snippet.

<div style="display:inline-block;" data-linked="true"><a data-links="1" name="mn-26086aa1b6aa38d2f6fe4af53eb786e1" style="text-decoration:none;display:inline-block;height:0.98em;width:0.69em;" href="mn-26086aa1b6aa38d2f6fe4af53eb786e1.xhtml"><img height="20px" width="14px" src="Penguin-mid-res.JPG" style="height:100%;width:100%;vertical-align:middle;"/></a></div>


The blue portion is for iBooks as mentioned in Liz's post. However, there's seem to be a problem when the above snippet is placed inside a paragraph tag.

As you can see, it works fine when the icon is outside the paragraph in the second case.

The reason we have the red part of the code is that Kindle e-Ink doesn't support style tag and it also doesn't (the ones I tested) accept "em" for image sizing. But it does support height/width attributes directly so by defining those we can set the height and width for Kindle and then it safely ignores the css inside the style attribute.

This part does seem to work right now.