html - 带 anchor 和按钮的盒子模型

Question

我有以下 fiddle : My Button Bar

我的问题很常见，尽管内联 block 并没有像我希望的那样提供帮助。如何使 anchor 和按钮大小相同。蓝色按钮需要包含在灰色栏内，它们应该有一个小边框，并且大小相同，正如您完全期望来自按钮栏的那样。

它只需要在 firefox 和 chrome 中工作。我们不再为 IE 烦恼(Chrome Frame)。

html 看起来像这样:

<div class="buttons">
    <button class="inline-button" type="submit" name="action" value="Update"><span data-icon="icon-cog">icon</span>Save</button>
    <a href="#"><span data-icon="icon-cog">icon</span>Cancel</a>
</div>

我使用的CSS如下:

div.buttons a, div.buttons button[type=submit] {
  position: static;
  display: inline-block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  outline: 0;
  vertical-align: baseline;
  height: 100%;
  font-family: PTSansBold;
  font-size: 12pt;
  text-align: left;
  background-color: #051DC3;
  color: white;
  padding: 4px;
  margin: 3px;
  width: 8em;
  border: none;
  text-decoration: none;
}

谢谢。

Answer 1

Demo

嗨，现在试试这个 css 这是 Css3 Box-sizing : border-box

div.buttons a, div.buttons button[type="submit"]{
-moz-box-sizing:border-box;
    box-sizing:border-box;
        -webkit-box-sizing:border-box;
    vertical-align:top;
}

Demo

---

more about this box-sizing