<button> styled with background image repeats in IE9 (browser/document modes fully IE9 and standard)
I have a login page that has 2 tags that have a background image defined in HTML as:
<开发者_如何学编程;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>
I have the CSS classes defined as:
.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;
}
I am using <!DOCTYPE html>
For some reason the second button (with value="App2") gets magically repeated in IE9 standards mode whereas the same HTML/CSS works fine in FF5.
If I hit the compatibility mode button it then displays correctly (IE has switched to IE7 document type - so says the dev tools).
If view source on IE 9 when the problem occurs then it shows be only one instance of the 2nd button; however using dev tools and using the selector feature it reckons there is another App2 button just after the form.
I tried removing the 1st (value="App1") button and changing the remaining button to use the same align-left class but it still gets repeated for now reason.
Anybody have any suggestions as to what might be causing the problem?
This is actually caused by a bug in IE9.
If you use a self-closing button tag which is styled with a background image then it will appear repeated in the page but only 1 of the images will be clickable. Not sure if the containing <div> is relevant I haven't tried without.
In my case where I had 2 buttons the 2nd button effectively fixed the bug for the 1st one which is why it was so confusing, i.e. if I swapped the order of the buttons then one that previously broken one worked.
The workaround is to use <button></button> syntax even though there is nothing between the open and close tag when using a background image in this way.
加载中,请稍侯......
精彩评论