title: How to style <button> to look like a <a>?
body: <p>Given the following snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    Some text
    &lt;a&gt;
      &lt;span&gt;abcdefghi abcdefghi abcdefghi abcdefghi&lt;/span&gt;
    &lt;/a&gt;
    Some text
  
    &lt;br /&gt;
    &lt;br /&gt; Some text
    &lt;button&gt;
      &lt;span&gt;abcdefghi abcdefghi abcdefghi abcdefghi&lt;/span&gt;
    &lt;/button&gt; Some text
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How would I make it so that the second block with <code>&lt;button&gt;</code> as a wrapper looks identical to the one with <code>&lt;a&gt;</code> as a wrapper?</p>
  
  <p>I'm trying to make a in-text button to open a modal and problem occurs when the text wraps to a newline. Sure I can just use <code>&lt;a&gt;</code> but that wouldn't be semantically accurate.</p>
  
  <p>Setting <code>white-space: nowrap</code> is not an option.</p>
  
  <p>I would think <code>display: inline</code> would've solved it but are there any internal browser styles that I'm missing?</p>
  
  <p>This needs to be IE10 compatible so I can't use <code>display: content</code> or <code>unset: all</code>.</p>