html - 在 HTML 中制作一个可展开的按钮

Question

我需要在 HTML 中制作“确定”和“取消”按钮，并且我希望它们具有固定宽度，以便两个按钮具有相同的大小。例如，像这样:

<style>
button.ok_cancel {
    width: 50px;
    background-color: #4274af;
    font-size: 9px;
    line-height: 12px;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    padding: 1px;
    border: 0px;
    margin: 0 0 0 5px;
    text-align: center;
    letter-spacing: 1px;
}
</style>

<button class="ok_cancel" onclick="do_cancel()">Cancel</button>

但现在我正在本地化文本，“取消”的翻译对于按钮来说可能太宽。如果字符串适合，我希望按钮的固定宽度为 50 像素，但如果字符串更宽，则宽度会扩展。将使用固定数量的侧边距来保持按钮的美观。

我知道我可能无法使用纯 CSS 来做到这一点，但是我可以使用的最简单的 HTML 是什么，它可以给我带来我想要的效果？

Answer 1

我根据twodayslate的答案进行了研究，最终得到了这个:

/* Browser hack! This is for everyone: */
button {
    display: inline;
    cursor: pointer;
    padding: 6px 6px;
    width: 50px;
    overflow: visible;
}
/* and this is for non-IE browsers: */
html>body button {
    min-width: 50px;
    width: auto;
}

IE 想要指定的宽度和溢出可见，其他浏览器想要最小宽度和宽度自动。 CSS hack 让 IE 看​​到一组属性，而另一个浏览器看到另一组属性。