代码之家 › 专栏 › 技术社区 › sankar

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

abbr internet-explorer css html

sankar · 技术社区 · 6 年前

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

这是第二个问题的代码笔(下边距问题:IE中的自动)。如果将大小缩小到750px以下,可以看到abbr标记下的行是如何移开的。如果您在我添加的abbr[标题]下取消对该样式的注释并重试,则该问题会在除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;
}

1 回复 | 直到 6 年前

muecas 6 年前

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

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

编辑您的特殊问题(当您更新答案时)不是缩写本身,而是您正在构建的flexbox网格。你只需要把 abbr 在一个容器中(例如,在我的例子中是一个div),所以 缩写 继承不会将其本身视为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>