1

我很惊讶在谷歌中没有看到这个问题的搜索结果:)。如果您打开这个 w3schools 链接 ( https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_abbr_test )，您可以看到 IE 在缩写词“WHO”下没有显示任何行，而其他浏览器做。我不想添加明确的边框底部：1px dotted #color，因为当表格的其他单元格中的文本换行为多行时，应用程序添加的边框底部将被推得很远，而不是直接留在缩写下方标记的词。我想知道为什么 IE 不显示 abbr 标签下的行。谢谢你的时间！

这是第二期的代码笔（margin-bottom 问题：IE 中的 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="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;
}
4

1 回答 1

1

Internet Explorer 中首字母缩写词和缩写的默认值为text-decoration: none;. 您可以通过将此样式定义添加到您的 css 来指定所需的样式（跨浏览器）：

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

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

于 2018-04-19T20:56:04.683 回答