IE不显示abbr标记的边框底部。

Question

我惊讶地看到谷歌没有搜索这个问题:)。如果您打开这个w3schools链接(test)，您可以看到IE没有在缩写单词“WHO”下显示任何行，就像其他浏览器一样。我不想添加一个明确的边框底部:1 1px虚线#颜色，因为当表格中的其他单元格中的文本包装成多行时，应用程序添加的边框底部将被推倒很远，而不是直接停留在abbr标记的单词下面。我想知道为什么IE不显示abbr标签下的行。耽误您时间，实在对不起!

这是第二次发行的代码(问题与保证金底部:汽车在IE中)。如果将大小缩小到750 If以下，则可以看到abbr标记下的行是如何移动的。如果您不评论我添加的and标题下的样式，然后再试一次，这个问题将在除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

Internet中缩写词和缩写的默认值是text-decoration: none;。通过将此样式定义添加到css中，可以指定所需的样式(跨浏览器)：

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

编辑您的特定问题(当您更新您的答案)不是缩写本身，而是您正在构建的柔性盒网格。您只需要将abbr包装在容器中(例如，div，就像我在我的例子中所做的那样)，这样abbr本身就不会被继承当作一个flex元素(因为它的容器有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>

​