html - 在网页上使用 svg 会导致 webkit 浏览器中出现奇怪的 css 渲染

Question

我遇到了一个奇怪的故障，这似乎只发生在 chrome 和 safari 中。很难用示例代码解释为什么会发生这种情况，但我会尝试说明我在用代码做什么，同时提供指向下面实际页面的链接。

首先，我有一个显示在行内 block 的无序列表，所以它可以像文本一样对齐。每个列表项都包含图像标签中的 svg 和带有简短描述的段落，两者都包含在单个 anchor 标签中。我想没什么特别的，但问题是:在 chrome 和 safari 中，浏览器在段落和图像之间呈现 1px x 大约 15px 的蓝色/黑色线条，我不知道为什么会这样。这是代码:

<div class="wrapper">
  <div class="justified-list home-icons"> 
        <ul>
          <li>
            <a href="#">
              <img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
              <br/>
              <p>Description</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
              <br/>
              <p>Description</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
              <br/>
              <p>Description</p>
            </a>
          </li>
        </ul>
        <span class="stretcher"></span>
      </div><!-- .justified-list -->
</div><!-- .wrapper -->

这是 css(我正在使用 scss):

.wrapper {
  width: 100%;
}
.justified-list {
    width: 100%;
    text-align: justify;

    * {
        display: inline;
    }

    li {
        display: inline-block;
        vertical-align: top;
    }

    .stretcher {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 0;
    }
}

此外，这里提供了一个codepen:

http://codepen.io/smelly586/pen/NPVVYd

如果有人知道发生了什么，或者更好:对此有可能的解决方案，我将不胜感激。

Answer 1

将元素上的 font-size 设置为 0。您看到的是 HTML 中空白的 anchor 元素中的下划线。

您可以关闭浏览器默认为 anchor 呈现的 text-decoration: underline;，但我们假设这不是您想要做的。

相反，需要使用类似 p { font-size: 1rem; 。

Example Codepen

因此，相应地，SCSS/LESS 将是:

.justified-list {
    width: 100%;
    text-align: justify;

    * {
        display: inline;
    }

    li {
        display: inline-block;
        vertical-align: top;
            
           a {
             font-size: 0;

             p { font-size: 1rem; }
           }
    }

    .stretcher {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 0;
    }
}