Question

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

输入
表格中的'a'发生了不好的事情

我知道IE7中的min-width存在问题，但是当设置'display：inline-block'时它应该有效。另外我记得填充不包含在宽度中，但我无法解释我所看到的内容。我看到的唯一方法是添加固定宽度的类“btn-short”并从常用按钮中删除min-width。是最好的解决方案还是IE7的最小宽度有一些修复？

<!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>

Answer 1

inline-block无法在IE7上运行，您需要使用zoom: 1; display: inline触发hasLayout来伪造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 。

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

1 个答案: