Image Link Rendering Issue w/ DuckDuckGo & Firefox

[unnsse]

Am loving using Hugo and the FixIt theme for my website (https://unnsse.io) - thank you so much for creating and maintaining this very lovely and useful theme!

Started using Clicky for website analytics, by pasting in the tracking code on the same line as Powered by, but right after the FixIt logo separated with a -?layouts/partials/footer.html:

https://github.com/unnsse/unnsse.io/blob/81a44f654ab553e9c681953dc5326cc42fa3be32/layouts/partials/footer.html#L25-L26:

- <a title="Google Analytics Alternative" href="https://clicky.com/101467984"><img alt="Clicky" src="//static.getclicky.com/media/links/badge.gif" border="0" /></a><script async data-id="101467984" src="//static.getclicky.com/js"></script>

Renders correctly via Safari & Chrome, but the image is bigger and appears misaligned:

Safari:

Chrome:

---

The other issue is that withFirefox & DuckDuckGo, the image doesn't render (not orange text or box surrounding the text) correctly:

Firefox:

DuckDuckGo:

Question(s):

1. Why is it not rendering in DuckDuckGo and Firefox but is rendering correctly (with the exception of image size alignment) on Safari & Chrome?
2. Is there a way to create a custom <div> tag to auto-render this so it doesn't look misaligned and looks like the same size (on all browsers, including mobile)?

Note: Wasn't able to edit the title of this thread so apologize if the title is incorrect (referring to localhost instead of specific browsers).

Originally posted by @unnsse in #525

[Lruihao]

Sorry！I think this is a customized requirement, so it's not very suitable to be built into the theme.
For your questions, it seems to be just a CSS issue, and you need to modify the style in _custom.scss until you are satisfied.