IE浏览器不显示abbr标签border-bottom问题咨询

真没想到谷歌上居然搜不到这个问题的相关结果！先跟你确认下问题：在IE浏览器里，<abbr>标签包裹的文字（比如示例里的"WHO"）不会显示下划线，但其他主流浏览器都正常。而且要是直接给<abbr>加border-bottom: 1px dotted #xxx，表格单元格里的文本一换行，这条下划线就会跑到整个单元格内容的最底部，根本不在每一行文字的底下，太闹心了。

给你个不用border-bottom的解决方案，用背景图模拟点状下划线，就算文本换行，每一行的文字底部都能有对应的下划线：

试试这段CSS：

abbr {
  /* 用SVG生成点状背景图，横向重复排列在文字底部 */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="%23333"/></svg>') repeat-x left bottom;
  /* 给底部留一点空间，避免背景图贴紧文字 */
  padding-bottom: 1px;
  /* 确保IE识别元素为行内级，保证背景定位准确 */
  display: inline;
}

这个方法的优势在于，背景图是跟着每一行文字走的，不像border-bottom是给整个<abbr>元素加一条线，换行后直接错位。而且SVG是矢量图，缩放不会模糊，颜色也能随便改（把fill="%23333"里的颜色码换成你需要的就行）。

另外要注意：<abbr>的title属性一定要加，这是语义化的核心，不管下划线显不显示，鼠标悬停能看到全称才是<abbr>标签的意义所在。

要是你需要兼容IE8及以下版本，SVG背景可能不支持，那可以换成1x1的点状PNG图，原理完全一致，只需要把background-image指向PNG地址即可。

内容的提问来源于stack exchange，提问作者sankar