Question

我很惊讶地看到Google没有针对此问题的搜索结果:)。如果您打开此w3schools链接（https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_abbr_test），您可以看到IE不会在其他浏览器的缩写词＃WHO;＃39;下显示任何行。我不想添加一个明确的border-bottom：1px点缀#color，因为当表的其他单元格中的文本换行到多行时，应用程序添加的border-bottom将被推向远处而不是直接停留在abbr下面标记的单词。我想知道为什么IE不显示abbr标签下的行。谢谢你的时间！

这是第二个问题的codepen（在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="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 Explorer中首字母缩写词和缩写词的默认值为<div class="checkboxdiv"> <input type="hidden" name="check" value=""> <input type="checkbox" name="check" value="One"><label>One</label> <br/> <input type="checkbox" name="check" value="Two"><label>Two</label> <br/> <input type="checkbox" name="check" value="Three"><label>Three</label> </div> <div class="checkboxmsg">Only two options are allowed</div>。您可以通过将此样式定义添加到css来指定所需的样式（跨浏览器）：

text-decoration: none;

编辑您的特定问题（当您更新答案时）不是缩写本身，而是您正在构建的flexbox网格。你只需要将abbr[title], acronym[title] { text-decoration: none; border-bottom: 1px solid dotted; }包装在一个容器中（例如我在我的例子中就是div），因此abbr本身不会被继承视为flex元素（如它的容器有abbr。

＆＃13;

display: flex;

＆＃13;

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;
}

＆＃13;

IE不显示abbr标签

1 个答案: