Question

我试图强制我的按钮始终具有一定的大小（以容器宽度的百分比表示）。因此，当输入中的文本比按钮长时，Firefox会关闭文本（我喜欢这样，但是，我可能稍后会想办法以某种方式向用户强调这一点），而IE和Chrome会拉长按钮。扰乱和谐以及所有好事。

小提琴：

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;
}

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

1 个答案: