跨度，按钮和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 class="xp-b-leftSide">
   &nbsp;
    </span>

我认为ie7存在空<span>的问题。