IE не показывает border-bottom для тега abbr

Question

Я был удивлен, что не нашел результатов поиска в Google по этому вопросу:). Если вы откроете эту ссылку w3schools ( https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_abbr_test), вы увидите, что IE не показывает ни одной строки под сокращенным словом "WHO", где, как и другие браузеры делать. Я не хочу добавлять явное border-bottom: 1px dotted #color, потому что, когда текст в других ячейках таблицы переносится на несколько строк, добавляемое приложением border-bottom будет сдвигаться далеко вниз вместо того, чтобы оставаться прямо под аббревиатурой. помеченное слово Я хотел бы знать, почему IE не показывает строку под тегами abbr. Спасибо за ваше время!

Вот кодовая ручка для второго выпуска (проблема с margin-bottom: auto в IE). Если вы уменьшите размер до 750 пикселей, вы увидите, как смещается линия под тегом abbr. Если вы откомментируете стиль в разделе abbr [title], который я добавил, и повторите попытку, проблема будет исправлена ​​в других браузерах, кроме 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="Stackru" 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

Значением по умолчанию для сокращений и аббревиатур в Internet Explorer является text-decoration: none;, Вы можете указать желаемый стиль (кросс-браузер), добавив это определение стиля к вашему CSS:

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

Отредактируйте свою конкретную проблему (когда вы обновили свой ответ) не само сокращение, а созданная вами сетка флексбокса. Вам просто нужно обернуть abbr в контейнере (например, div, как я сделал в моем случае), поэтому abbr сам по себе не будет рассматриваться как гибкий элемент наследования (так как его контейнер имеет 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="Stackru" 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>