Css不能在Chrome或Firefox中运行，但可以在IE中使用

Question

我的ASP.net网站上有一个按钮：

<div class="input-control">
    <input type="button" id="btnInvite" value="Invite" name="Invite" class="btn" />
</div>

我的css是：

.btn {
border-style: none;
border-color: inherit;
width: 100%;
height: 35px;
background-color: green;
overflow:auto;
}

这在IE中运行良好，但在Chrome或Firefox中没有显示绿色只是灰色的按钮，为什么会这样？

Answer 1

可能是因为您忘记了border-width值。 我假设IE默认会自动添加border-width: 1px;，而Chrome和Firefox则不会。

将此添加到您当前的代码：

＆＃13;

＆＃13;

.btn {
border: 1px solid inherit;
}

＆＃13;

＆＃13;

＆＃13;

这应该是结果：

＆＃13;

＆＃13;

.btn {
border: 1px solid inherit;
width: 100%;
height: 35px;
background-color: green;
overflow:auto;
}

＆＃13;

<div class="input-control">
    <input type="button" id="btnInvite" value="Invite" name="Invite" class="btn" />
</div>

＆＃13;

＆＃13;

＆＃13;