Set a uniform dotted border on abbr in all browsers

[TazTheManiac]

The current solution is to have no border, a dotted underline, and a solid underline as fall back. This gives a non uniform solution between some browsers that still can't render dotted underlines.

The reason for the current fix (as far as i have found) is because of the font Meiryo, not playing nicely with borders, as mentioned in a bugzilla report here, and in a pull request here.
But this issue seams to have been solved since Firefox v40 as mentioned in the same bugzilla report, and the earliest version that is qualified for the current ESR rotation is v52.

Furthermore, the first version that was qualified for ESR is v10, and the global usage of v10 to v40 (where the bug was fixed) is 0.12% as seen here.

My solution to this is.

abbr[title] {
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}

While i agree that using a border, might not be the most elegant solution. This at least gives a uniform look.

[mattbrundage]

@TazTheManiac , I also dislike the solid underline fallback, which makes abbrs look like links. I work around it with @supports:

abbr[title] {
	border-bottom: 1px dotted;
	text-decoration: none;
}
@supports (text-decoration: underline dotted) {
	abbr[title] {
		border-bottom: 0;
		text-decoration: underline dotted;
	}
}