Пролеты, кнопки и плавающие ошибки IE7

Question

Я пытаюсь создать кнопку, которая может изменять свой размер в зависимости от размера текста внутри нее. Кнопка определяется текстом HTML ниже. Вся кнопка определяется как <span> и имеет три составляющих компонента: левую изогнутую часть кнопки, центральное тело кнопки (содержит текст и соответственно расширяется) и правую изогнутую часть кнопки. Правая и левая части кнопки фактически являются зеркальным отображением друг друга.

Текущий код выглядит совершенно нормально в Firefox и IE8, но когда я смотрю его в IE7, правая изогнутая часть плавает вправо (это правильно), но левая и центральная часть плавают слева от панели, что кнопка в. Это не правильно, и я хочу исправить это. Тем не менее, попытка решить эту проблему, поскольку она связана с IE, является для меня большой болью. Кто-нибудь может предложить решение или обходной путь? Вот картинка для кнопки. xp-b-left определяет левую сторону кнопки и xp-b-right правую сторону кнопки.

Вот так выглядит кнопка в IE7:

Вот так выглядит кнопка в Chrome, FF и IE8 + (без плавающего элемента слева и лишнего пробела между текстом и краями внутри кнопки):

<span class="xp-b-submit xp-b-submit-flt xp-l-il xp-b-right">
    <span class="xp-b-leftSide">
    <!---->
    </span>
    <a href="#" class="xp-t-bold" id="flightSubmitLink">
        Search
    </a>
    <span class="xp-b-rightSide">
    <!---->
    </span>
</span>

CSS для кнопки:

.xp-b-submit-flt {
    background: url("../../images/new_blue_button.png") no-repeat scroll -22px 50% transparent;
}

.xp-b-submit {
    background-position: right -32px;
}

.xp-b-submit, .xp-b-leftSide, .xp-b-submit-large, .xp-b-submit-large .xp-b-leftSide, .xp-b-rightSide {
    background: url("../images/buttonBG.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
}

.xp-b-rightfloat {
    float: right;
}
.xp-b-leftSide {
    background-position: left -32px;
    float: left;
    height: 19px;
    width: 3px;
}

.xp-b-submit a#flightSubmitLink {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 3px;
}

.xp-b-submit a, .xp-b-submit input {
    color: #FFFFFF !important;
    font-size: 10px;
    padding: 5px 5px 4px 2px;
}

.xp-b-submit a, .xp-b-submit input, .xp-b-submit-large a, .xp-b-submit-large input {
    float: left;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.xp-t-bold {
    font-weight: bold !important;
}

.xp-b-rightSide {
    background-position: right -32px;
    float: right;
    height: 19px;
    width: 3px;
}

Answer 1

Ааа.Я думаю, у меня была эта проблема.Попробуйте добавить в span.

<span class="xp-b-leftSide">
   &nbsp;
    </span>

Я думаю, что ie7 имеет проблему с пустыми <span> s.