为什么我在锚标记和内部跨度之间有 space

Question

我有问题。我在列表的所有项目中都有一个 link 列表。当我想在锚标记内添加一个跨度时，我有一个 space 并且无法删除它..

 <li class="elementMyAccount spaceTopBetweenElementMyAccount">

     <a href=""
         class="elementMyAccountText">
         Text4
         <div class="adressDescription" >(text4)</div>
     </a>
</li>

我发给你 jsFiddle 给你看 css 和 html:

https://jsfiddle.net/5fwvsqnb/10

我在 css 上删除了此 space 行，但它仅适用于 google chrome ...但不适用于 Safari 和 IE（不要试试其他的）

我将 css 更改为：

#my-account .elementMyAccountText{
font-size: 15px;
position: absolute;
margin-left : 5px;
line-height:60px;
width:240px;
display: flex;
align-items: center;
}

#my-account .adressDescription{
display:block;
position:absolute;
font-size: 11px;
text-decoration: none;
margin-left: 40px;
line-height:15px;
display: block;
}

但也许这不是解决方案，因为在 IE 上，我的跨度和上面的文本之间有一个 space。

谢谢大家，如果你愿意帮助我！

Answer 1

我不是专家，但我想，这是因为渲染引擎（我不知道怎么命名）无法识别您的风格，例如-webkit-列数。 IE不是支持者，如果是，它很快就不再支持了。忘记 IE。

Answer 2

问题出在您的代码中，elementMyAccountText class 有 position: absolute;.

如果你想显示 TEXT 左对齐框的中心然后你可以使用 display: flex 到 ul 和 li 和 align-items: center; 到 li。

如果你想要全框可点击，那么

从 elementMyAccount class 中删除 height 并添加以下代码

ul li a{
width: 100%;
display: block;
padding: 20px 0; 
}

.listElementMyAccount {
  margin-top: 50px;
}

.listElementMyAccount ul {
  margin-left: -8px;
  display: flex;
}

.elementMyAccount {
  border-radius: 7px;
  border: 1px solid black;
  height: 60px;
  width: 240px;
  margin-left: 8px;
  margin-top: 8px;
  display: flex;
  align-items: center;
}


/*.elementMyAccountText{
 font-size: 15px;
 position: absolute;
 margin-left : 5px;
 line-height:60px;
 width:240px;
 height:60px;

}*/

.elementMyAccountImg {
  margin-left: 5px;
  opacity: 0.75;
  margin-right: 10px;
  vertical-align: middle;
}

.adressDescription {
  display: block;
  position: absolute;
  font-size: 11px;
  text-decoration: none;
  line-height: 15px;
  display: block;
}

<div class="listElementMyAccount">
  <ul>

    <li class="elementMyAccount">
      <a href="" class="elementMyAccountText">
                                    TEXT1
                                </a>
    </li>
    <li class="elementMyAccount">
      <a href="" class="elementMyAccountText">
                                    TEXT2
                                </a>
    </li>
    <li class="elementMyAccount">
      <a href="" class="elementMyAccountText">
                                    TEXT3
                                </a>
    </li>
    <li class="elementMyAccount">
      <a href="" class="elementMyAccountText">
                                    TEXT4
                                                                                                      <span class="adressDescription" >(text4)</span>
                                </a>
    </li>

  </ul>



</div>

为什么我在锚标记和内部跨度之间有 space

Why I have space between anchor tag and span inside

html

css

cross-browser

stylesheet