IE 不显示 abbr 标签的 border-bottom

Question

令我惊讶的是 Google 中没有针对此问题的搜索结果 :)。如果你打开这个 w3schools link (https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_abbr_test)，你可以看到 IE 没有显示缩略词 'WHO' 下的任何行，而其他浏览器会显示。我不想添加显式的 border-bottom: 1px dotted #color 因为当 table 的其他单元格中的文本换行到多行时，应用程序添加的 border-bottom 将被向下推而不是停留直接在 abbr 标记词的下方。我想知道为什么 IE 不显示 abbr 标签下的行。感谢您的宝贵时间！

这是第二期的代码笔（IE 中 margin-bottom: auto 的问题）。如果将尺寸缩小到 750px 以下，您可以看到 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="Whosebug" 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;
}

编辑您的特定问题（当您更新答案时）不是缩写本身，而是您正在构建的 flexbox 网格。您只需要将 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="Whosebug" 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>

IE 不显示 abbr 标签的 border-bottom

IE does not show border-bottom for abbr tag

html

css

internet-explorer

abbr