<button> в стиле с фоновым изображением повторяется в IE9 (режим браузера / документа полностью IE9 и стандарт) - PullRequest
Новая
       27

<button> в стиле с фоновым изображением повторяется в IE9 (режим браузера / документа полностью IE9 и стандарт)

0 голосов
/ 22 июля 2011

У меня есть страница входа, которая имеет 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;
}

Яс помощью

По какой-то причине вторая кнопка (со значением = "App2") волшебным образом повторяется в стандартном режиме IE9, тогда как тот же HTML / CSS отлично работает в FF5.

Если я перехожу в режим совместимостизатем кнопка отображается правильно (IE переключился на тип документа IE7 - так говорят инструменты разработки).

Если при возникновении проблемы просматривать исходный код в IE 9, то он показывает только один экземпляр 2-й кнопки;однако, используя инструменты разработчика и используя функцию селектора, она считает, что сразу после формы есть еще одна кнопка App2.

Я попытался удалить 1-ю кнопку (значение = "App1") и изменить оставшуюся кнопку, чтобы использовать то же выравнивание- левый класс, но он все еще повторяется на данный момент.

У кого-нибудь есть какие-либо предложения относительно того, что может быть причиной проблемы?

1 Ответ

0 голосов
/ 02 августа 2011

Это на самом деле вызвано ошибкой в ​​IE9.

Если вы используете самозакрывающийся тег кнопки, стилизованный под фоновое изображение, он будет повторяться на странице, но только 1 из изображений будет кликабельным. Не уверен, имеет ли значение <div>, без которого я не пробовал.

В моем случае, когда у меня было 2 кнопки, 2-я кнопка эффективно исправила ошибку для 1-й кнопки, поэтому она так сбивала с толку, то есть, если я поменял местами порядок кнопок, то сработала ранее сломанная.

Обходной путь должен использовать синтаксис <button></button>, даже если между открывающим и закрывающим тегом нет ничего при использовании фонового изображения таким образом.

...