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

Question

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

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

<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.

中空白锚元素的下划线

您可以关闭浏览器默认为锚呈现的 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;
    }
}

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

Using svg on webpage results in weird css rendering in webkit browsers

html

css

svg

webkit

Example Codepen