html - <a>标签小于 child

我试图制作一个简单的富文本编辑器，但工具栏按钮有问题。我想要达到的是这样的效果：，但是我在按钮之间有非常奇怪的蓝色下划线。（chrome）你能帮我吗？

#buttons svg {
  height: 24px;
  width: 24px;
  display: inline;
}

#buttons svg path {
  fill: #FFFFFF;
  margin: 0;
  padding: 0;
}

#buttons a {
  height: 100%;
}

body div {
  position: absolute;
  display: inline;
}

#toolbar {
  width: 25%;
  z-index: 9;
  height: 100%;
  right: 0;
  box-shadow: 0 0 13px;
  box-sizing: border-box;
  padding: 0 3rem 0 3rem;
  background: dodgerblue;
}

<div id="toolbar">
  <span id="buttons">
        <a title="New" onclick="app.new()" href="#">
            <svg>
                <path fill="#000000" d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" ></path>
            </svg>
        </a>
        <a title="Save" onclick="app.save()" href="#">
            <svg>
                <path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"></path>
            </svg>
        </a>
        <a title="Open" onclick="app.open()" href="#">
            <svg>
                <path fill="#000000" d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" ></path>
            </svg>
        </a>
    </span>
</div>

最佳答案

在这种情况下，您可能希望使用<button>而不是<a>，因为您没有导航到新的URL。
阅读更多：Links vs. Buttons in Modern Web Applications
要重置默认按钮样式，例如可以添加以下CSS：

button {
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background: none;
}

关于html - <a>标签小于 child ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50180631/