IE does not show border-bottom for abbr tag

Question

I was surprised to see no search results in Google for this issue :). If you open this w3schools link (https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_abbr_test), you can see that IE does not show any line under the abbr word 'WHO', where as other browsers do. I do not want to add an explicit border-bottom: 1px dotted #color because when the text in other cells of table wraps to multiple lines, the border-bottom added by the application will be pushed far down instead of staying directly underneath the abbr tagged word. I would like to know why IE does not show the line under abbr tags. Thanks for your time!

Here is the codepen for second issue (issue with margin-bottom: auto in IE). If you shrink the size to below 750px, you can see how the line under the abbr tag moves away. If you un-comment the style under abbr[title] I added and try again, the issue gets fixed in other browsers except IE. https://codepen.io/Sankaryc/pen/aGOqoZ

HTML:

<div>
  <div class="flex-row">
    <div class="flex-basis-9">
      <label>Field1</label>
  </div>
  <div class="flex-basis-24">Value1 </div>

  <div class="flex-basis-9">
      <label>Field2</label>
  </div>
  <a href="/some-url">dummy url</a>
  <abbr title="StackOverflow" tooltipPosition="bottom">SO</abbr>
    <div class="flex-basis-9"></div>
  <div class="flex-basis-9">
      <label>Field3</label>
  </div>
  <div class="flex-basis-24">Value3 </div>

</div>

CSS:

div {
  padding-right:2px;
}

.flex-row {
  display:flex;
  line-height:1;
  width:100%;
  margin-top:3px;
}

.flex-basis-9 {
  flex-basis:9%;
}

label {
  padding: 0;
}

.flex-basis-24 {
  flex-basis:24.33%;
}

abbr[title] {
    cursor: help;
    border-bottom: 1.5px dotted #000 !important;
    text-decoration: none !important;
    /*margin-bottom:auto */
}
a {
  padding-right: 10px;
}

Answer 1

The default value for an acronyms and abbreviations in Internet Explorer is text-decoration: none;. You can specify the desired style (cross browser) by adding this style definition to your css:

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

Edit Your particular problem (as you updated your answer) is not the abbreviation itself, but the flexbox grid you are building. You just need to wrap the abbr in a container (a div for example as i did in my case), so the abbr itself won't be treated as a flex element by inheritance (as its container has display: flex;.

div {
  padding-right:2px;
}

.flex-row {
  display:flex;
  line-height:1;
  width:100%;
  margin-top:3px;
}

.flex-basis-9 {
  flex-basis:9%;
}

label {
  padding: 0;
}

.flex-basis-24 {
  flex-basis:24.33%;
}

abbr[title] {
  position: relative;
  cursor: help;
  text-decoration: none !important;
}
abbr[title]:before {
  position: absolute;
  left: 0;
  top: 1em;
  width: 100%;
  content: '';
  border-bottom: 1px dotted #000 !important;
}
a {
  padding-right: 10px;
}

<div>
  <div class="flex-row">
    <div class="flex-basis-9">
      <label>Field1</label>
  </div>
  <div class="flex-basis-24">Value1 </div>
    
  <div class="flex-basis-9">
      <label>Field2</label>
  </div>
  <a href="/some-url">dummy url</a>
    <abbr title="StackOverflow" tooltipPosition="bottom">SO</abbr>
    <div class="flex-basis-9"></div>
  <div class="flex-basis-9">
      <label>Field3</label>
  </div>
  <div class="flex-basis-24">Value3 </div>
    
</div>