Inline `code` tags inside of `a` tags aren't formatted properly

Created by: impressivewebs

There are rare instances where someone might be writing about code and wrapping terms in HTML's <code> tags. Sometimes these are also hyperlinked. When this happens with Bootstrap, the default styles for the code tag overpower the styles for the link, so you can't actually tell that it's a link.

You can see examples in this CodePen demo, in the second paragraph. Notice the two portions of that paragraph inside <code> tags. Both are links. The styling on the <code> portion makes the link appear like two links. Also, the 2nd link doesn't look like a link at all, because only the <code> portion is inside the link. Also, when you hover over the links, the styling looks wrong.

This happens in Bootstrap 3 and 4. Here's a demo using Bootstrap 3

An easy fix for this is to add the following:

a code {
  color: inherit;
  background: inherit;
  padding: inherit;
}

Here is a corrected version with Bootstrap 4 and here is Bootstrap 3 corrected.

You could also do all: inherit but I'm not sure if browser support for the all property is good. FWIW, most code bases have this problem, including ZURB's Foundation (I'll file an issue with them too).