带有 css 的按钮：IE7 中的最小宽度问题答案

【问题标题】：Buttons with css: problems with min-width in IE7带有 css 的按钮：IE7 中的最小宽度问题
【发布时间】：2014-03-22 18:21:33
【问题描述】：

我想为按钮使用 CSS。对于某些按钮，我使用输入元素，对于其他 - 链接。对于带有短文本的按钮，我想设置最小宽度。对于所有按钮，我希望将文本居中对齐并设置填充。还使用了门户表布局的某处。下面的代码在 FF 中看起来不错，但在 IE7 中却不行：

输入中的文本对齐不正确
'a' 在表中时会发生一些不好的事情

我知道 IE7 中的 min-width 存在问题，但它应该在设置 'display: inline-block' 时工作。我还记得宽度不包括填充，但我无法解释我所看到的。我看到的唯一方法是添加具有固定宽度的类“btn-short”并从公共按钮中删除最小宽度。它是最佳解决方案还是 IE7 的 min-width 有一些修复？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        input.btn {
            height: 26px;
            display: inline-block;
            min-width: 80px;
            overflow:visible;
        }

        a.btn {
            height: 19px;
            display: inline-block;
            min-width: 60px;
            background: none repeat scroll 0 0 #008000;
        }

        .btn {
            background: none repeat scroll 0 0 darkblue;
            color: #FFFFFF;
            font-family: Verdana, Tahoma, sans-serif;
            font-size: 14px;
            padding: 4px 10px 3px;
            text-align: center;
            text-decoration: none;
            border: none;
            white-space: nowrap;
        }

        td {
            border: 1px solid #000000;
        }
    </style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <input type="submit" value="Search" class="btn"/>
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="button" value="Clear" class="btn"/>
        </td>
    </tr>
</table>
<br/>
<input type="submit" value="Search" class="btn"/><br/><br/>
<input type="button" value="Clear" class="btn"/><br/><br/>
<input type="button" value="Change Default Values" class="btn"/><br/><br/>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <a href="#" class="btn">Search</a>
        </td>
        <td>&nbsp;</td>
        <td>
            <a href="#" class="btn">Clear</a>
        </td>
    </tr>
</table>
<br/>
<a href="#" class="btn">Search</a><br/><br/>
<a href="#" class="btn">Clear</a><br/><br/>
<a href="#" class="btn">Change Default Values</a><br/><br/>
</body>
</html>

【问题讨论】：

jsfiddle.net/P3v57/1
您必须使用hack 才能使display: inline-block 为IE7 工作
@AmarnathBalasubramanian 据我了解，您将我的代码粘贴到 jsfiddle。我没有这样做是因为 jsfiddle 在 IE7 中不起作用。你为什么这么做？
@Vucko 我已经用这个 hack 尝试了下面哈希姆评论中的代码，但它不起作用。

标签： css internet-explorer button

【解决方案1】：

inline-block不适用于IE7，你需要使用zoom: 1;触发hasLayout，包括display: inline来伪造display-inline效果：

input.btn {
    height: 26px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    min-width: 80px;
}

a.btn {
    height: 19px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    min-width: 60px;
    background: none repeat scroll 0 0 #008000;
}

仅供参考：star-hack 用于 IE 6/7。

【讨论】：

感谢您的回答，但没有帮助。结果看起来一样（我已经仔细检查过）。
@ValentinaChumak 您可能还需要为 IE 6/7 使用min-width hack。看看：stackoverflow.com/questions/7068967/…