Ich versuche, eine Art Befehlsleiste zu erstellen. Es muss im IE9 funktionieren, also ist die Flexbox raus. Stattdessen benutze ich eindisplay:table Layout

Das erste Snippet (mit<span>s) so möchte ich es haben. Das zweite Snippet ist das richtige HTML und es ist nicht richtig gestaltet. Die Elemente sind nicht richtig angeordnet, wodurch der zweite Knopf eine Zeile nach unten gedrückt wird und die Ränder nicht zusammenfallen.

Gibt es eine Möglichkeit, dies zu beheben, ohne die Tasten zu umschließen? Wenn ich das tun würde, müsste ich viele Stile rückgängig machen und wiederholen, um den Rahmen auf dem Wrapper zu platzieren. Wenn alles andere fehlschlägt, kann ich vermutlich @ ersetze<button> mit<span role="button" tabindex="0"> überall

html {
  font-size: 24px;
  line-height: 1rem;
}
* {
  font: 18px Calibri;
  box-sizing: border-box;
}
.controls {
  margin: 1rem;
  height: 1rem;
  width: 800px;
  border: 1px solid #c77;
  background-color: #eee;
  display: table;
  border-collapse: collapse;
}
.controls > * {
  display: table-cell;
  white-space: nowrap;
}
.spacer {
  width: 99%;
}
button,
span {
  height: 1rem;
  border: 1px solid #7c7;
  padding: 0 0.5rem;
  background: #f7f7f7;
}

<div class="controls">
  <div>Title</div>
  <div class="spacer"></div>
  <span>Button A</span>
  <span>Button B</span>
</div>

<div class="controls">
  <div>Title</div>
  <div class="spacer"></div>
  <button type="button">Button A</button>
  <button type="button">Button B</button>
</div>