Example Codepen

Question

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

首先，我有一个无内容列表显示内联块，因此可以像文本一样对齐。每个列表项包含图像标记中的svg和包含简短描述的段落，两者都包含在单个锚标记中。我猜没有什么特别的，但是这里有一个问题：在chrome和safari中，浏览器在段落和图像之间呈现1px乘以大约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中空格的锚元素的下划线。

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

1 个答案:

Example Codepen