跨度、按钮和IE7浮动错误

Question

我正在尝试创建一个按钮，它能够根据其中的文本大小自动调整大小。该按钮由下面的HTML文本定义。整个按钮被定义为一个<span>，它有三个组成部分:按钮的左弯曲部分、按钮的中心主体(容纳文本并相应地展开)和按钮的右弯曲部分。按钮的左右两部分实际上是彼此的镜像。

当前的代码在火狐和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>的问题。