bootstrap: abbr[title] should not have border-bottom

On the latest Firefox releases this is showing 2 underlines on abbr elements, the specification states that the default CSS for abbr[title] should be:

abbr[title], acronym[title] { text-decoration: dotted underline; }

Therefore this is not required in Bootstrap.

Refer to: http://www.w3.org/TR/html5/rendering.html#phrasing-content-0

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 1
Comments: 33 (16 by maintainers)

Commits related to this issue

Favor text-decoration over border-bottom where supported; fixes #16574 See also https://github.com/necolas/normalize.css/pull/468 [skip sauce] — committed to twbs/bootstrap by cvrebert 8 years ago
remove abbr border-bottom styling. fixes #16574. — committed to twbs/bootstrap by mdo 7 years ago
remove abbr border-bottom styling. fixes #16574. — committed to twbs/bootstrap by mdo 7 years ago

Most upvoted comments

Chrome and Firefox are implementing abbr[title], acronym[title] { text-decoration: dotted underline; } per the W3C specification HTML5 Section 10.3.4. Firefox has already released this change. Other browsers have yet to.

Remember, other browsers never styled abbr to begin with. The style you know from normalize.css v3 came from the Firefox style, and Firefox has since changed that style to match the spec. normalize.css should not invent a normalization that does not follow any browser or specification.

As for the solid line; the nearest fallback for text-decoration: underline dotted is text-decoration: underline, which is equivalent to text-decoration: underline solid; and this is why you see a solid line. You are experiencing the same thing your IE visitors have been experiencing for years, which is being a little behind the curve and getting the fallback.

As Chrome adds this update (which might come sooner if you ask them for it), your visitors will receive the dotted experience. Does this help clarify the situation?

Should you wish to avoid the standards and the fallback, I would recommend adding this rule to your CSS.

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

jonathantneal on Apr 12, 2016

I don’t know about “alpha”, but normalize.css v4 has had a proper release. A lot of people and time and testing went into v4. There were also a lot of fixes beyond that particular issue. I also understand if you would want to just patch this one thing; and in that case I would recommend adding this rule to your CSS.

 abbr[title] {
   border-bottom: none;
   text-decoration: underline;
   text-decoration: underline dotted;
}

jonathantneal on Apr 12, 2016

Last time I tried this in Chrome it resulted in a black solid line for abbr. I will need to check again. Also I was under the impression we had backported this but apparently not. On Apr 13, 2016 00:05, “Blake Niemyjski” notifications@github.com wrote:

@jonathantneal https://github.com/jonathantneal Yes my app is deployed in production and our customers are seeing this with firefox and opera. Also v4 is alpha and will break a lot of stuff on top of it I’m using less.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/twbs/bootstrap/issues/16574#issuecomment-209100168

XhmikosR on Apr 12, 2016