html - 如何设置 的样式使其看起来像 ？

Question

给定以下代码段:

div {
  width: 150px;
  line-height: 1.5;
}

a,
button {
  background: red;
}

button {
  display: inline;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  margin: 0;
  border: none;
  text-align: left;
}

<div>
  Some text
  <a>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </a>
  Some text

  <br />
  <br /> Some text
  <button>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </button> Some text
</div>

我怎样才能使第二个 block 带有 <button>因为包装器看起来与带有 <a> 的包装器相同作为包装器？

我试图制作一个文本内按钮来打开模式，当文本换行时出现问题。当然我可以使用 <a>但这在语义上并不准确。

设置white-space: nowrap不是一个选项。

我会想 display: inline本来可以解决的，但是有没有我遗漏的内部浏览器样式？

这需要与 IE10 兼容，所以我不能使用 display: content或 unset: all .

Answer 1

像这样？

div {
  width: 150px;
  line-height: 1.5;
}

a,
button {
  background: red;
}

button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}

<div>
  Some text
  <a>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </a>
  Some text

  <br />
  <br /> Some text
  <button>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </button> Some text
</div>