Question

我有一个登录页面，其中有2个标签，其背景图像在HTML中定义为：

<div>
    <button type="submit" name="loginButton" value="App1" class="login-button app1-logo-bkgrd align-left" />
    <button type="submit" name="loginButton" value="App2" class="login-button app2-logo-bkgrd align-right" />
</div>

我将CSS类定义为：

.align-left {
    float: left;
}

.align-right {
    float: right;
}

.app1-logo-bkgrd {
    background: transparent url('images/app1logo.png') top left no-repeat;
    width:220px;
    height:180px;
}

.app2-logo-bkgrd {
    background: transparent url('images/app2logo.png') top left no-repeat;
    width:220px;
    height:180px;
}

.login-button 
{
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
}

我正在使用＆lt;！DOCTYPE html＆gt;

出于某种原因，第二个按钮（值为“App2”）在IE9标准模式下神奇地重复，而相同的HTML / CSS在FF5中工作正常。

如果我点击兼容模式按钮，它会正确显示（IE已切换到IE7文档类型 - 所以说开发工具）。

如果在问题发生时在IE 9上查看源，那么它只显示第二个按钮的一个实例;但是，使用开发工具并使用选择器功能，它会在表单后面有另一个App2按钮。

我尝试删除第一个（value =“App1”）按钮并更改剩余按钮以使用相同的左对齐类，但现在仍然会重复。

有人对可能导致问题的原因有任何建议吗？

Answer 1

这实际上是由IE9中的错误引起的。

如果您使用自动关闭按钮标签，该标签使用背景图像设置样式，则它将在页面中重复显示，但只有1个图像可以点击。不确定包含<div>是否相关，我没有尝试过。

在我的情况下，我有2个按钮，第二个按钮有效地修复了第一个按钮的错误，这就是为什么它如此令人困惑，即如果我交换了按钮的顺序，那么之前打破了一个按钮的顺序。

解决方法是使用<button></button>语法，即使在以这种方式使用背景图像时open和close标记之间没有任何内容。

<button>在IE9（浏览器/文档模式完全IE9和标准）</button>中使用背景图像重复样式

1 个答案: