html - 我不希望 IE 和 Chrome 扩展我的按钮以适应所有文本

Question

我试图强制我的按钮始终具有特定大小(以容器宽度的百分比表示)。因此，当输入中的文本比按钮长时，Firefox 会剪掉文本(我喜欢这个，不过，我可能稍后会研究以某种方式向用户突出显示它的方法)，而 IE 和 Chrome 会拉长按钮。破坏和谐和一切美好。

fiddle :

http://jsfiddle.net/eurythmech/3H2g6/1/

HTML

<table class="speed-agenda-button-rows-table">
    <tbody>
        <tr class="speed-agenda-button-row">
            <td class="speed-agenda-button-container">
                <input type="button" data-is-event="1" data-zeroprice="1" data-event-date-id="1329" data-text="881002001" data-price="1658,00" data-link-id="0" class="speed-agenda-button" onclick="if (typeof (onSpeedButtonClick) === 'function') onSpeedButtonClick(this); return false;__doPostBack('ctl00$ContentPlaceHolder1$speedBookingControl$ctl55','')" value="Option A" name="ctl00$ContentPlaceHolder1$speedBookingControl$ctl55">
            </td>
            <td class="speed-agenda-button-container">
                <input type="button" data-is-event="1" data-zeroprice="1" data-event-date-id="1329" data-text="20100013" data-price="45,00" data-link-id="0" class="speed-agenda-button" onclick="if (typeof (onSpeedButtonClick) === 'function') onSpeedButtonClick(this); return false;__doPostBack('ctl00$ContentPlaceHolder1$speedBookingControl$ctl56','')" value="Option B" name="ctl00$ContentPlaceHolder1$speedBookingControl$ctl56">
            </td>
            <td class="speed-agenda-button-container">
                <input type="button" data-is-event="1" data-zeroprice="1" data-event-date-id="1329" data-text="20810201" data-price="20,00" data-link-id="0" class="speed-agenda-button" onclick="if (typeof (onSpeedButtonClick) === 'function') onSpeedButtonClick(this); return false;__doPostBack('ctl00$ContentPlaceHolder1$speedBookingControl$ctl57','')" value="The much elongated option C" name="ctl00$ContentPlaceHolder1$speedBookingControl$ctl57">
            </td>
            <td></td>
        </tr>
        <tr class="speed-agenda-button-row">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS:

.speed-agenda-button-rows-table {
    width: 90%;
}
.speed-agenda-button-row {
    width: 100%;
}
.speed-agenda-button-container {
    background-clip: padding-box;
    height: 25px;
    padding: 2px 4px;
    width: 25%;
}
.speed-agenda-button {
    background-color: #FFFFFF;
    border: 1px solid #A2A2A2;
    border-collapse: collapse;
    box-sizing: border-box;
    color: #000000;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 10px;
    height: 25px;
    line-height: 20px;
    margin: 0 4px;
    outline: medium none;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

Answer 1

在下面的类中添加“display:inline-block”属性

.speed-agenda-button-container {
background-clip: padding-box;
height: 25px;
padding: 2px 4px;
width: 25%;
display:inline-block;
}