IE7 显示块和宽度：自动

Question

我有一个小问题，它一直困扰着我一段时间，尽管我已经尝试过，但我无法或我的生活在这里或通过谷歌找到解决它的解决方案。问题本身只存在于 IE7（我不确定 IE6 但我想说结果有点类似于 IE7）

这是我的标记：

<div class="roomsLeft">
  <a href="#" class="selectProperty button">Select</a>
  <span>Only 3 rooms left!</span>
</div>

这是上述标记的 CSS：

.roomsLeft{
    background:#fffed7;
    border-radius:5px;
    padding:1px;
    margin:15px 0 0 0;
    border:1px solid #ffd542;
    margin-right:-3px;
    width:auto;
    display:inline-block;}

.roomsLeft span{
    color:#555;
    font-size:0.7em;
    padding: 9px 8px 8px 8px;
    display:inline-block;
    width:auto;}

按钮的 CSS（如果需要）：

.button {
    font-family:tahoma;
    background:#F70065;
    background:-moz-linear-gradient(top,#fb458f 0%,#F70065 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fb458f),color-stop(100%,#F70065));
    background:-webkit-linear-gradient(top,#fb458f 0%,#F70065 100%);
    background:-o-linear-gradient(top,#fb458f 0%,#F70065 100%);
    background:-ms-linear-gradient(top,#fb458f 0%,#F70065 100%);
    background:linear-gradient(top,#fb458f 0%,#F70065 100%);
     /* For Internet Explorer 5.5 - 7 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fb458f, endColorstr=#F70065 ); 
    /* For Internet Explorer 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fb458f, endColorstr=#F70065 )";
    padding:7px 9px;
    color:#fff;
    font-size:0.7em;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #DD005B;
    font-weight:800;
    text-decoration:none;
    letter-spacing:0em;
    text-shadow:1px 0px 5px #DD005B;
    box-shadow:inset 0px 1px rgba(255,255,255,0.2);}

.button:hover {
    background:#F70065;
    background:-moz-linear-gradient(top,#fb458f 0%,#F70065 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fb458f),color-stop(100%,#F70065));
    background:-webkit-linear-gradient(top,#fb458f 0%,#F70065 100%);
    background:-o-linear-gradient(top,#fb458f 0%,#F70065 100%);
    background:-ms-linear-gradient(top,#fb458f 0%,#F70065 100%);
    background:linear-gradient(top,#fb458f 0%,#F70065 100%);
     /* For Internet Explorer 5.5 - 7 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fb458f, endColorstr=#F70065 ); 
    /* For Internet Explorer 8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fb458f, endColorstr=#F70065 )";
    padding:7px 9px;
    color:#fff;
    font-size:0.7em;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border:1px solid #DD005B;
    font-weight:800;
    text-decoration:none;
    letter-spacing:0em;
    text-shadow: 0 0 5px rgba(255,255,255,0.7);
    box-shadow:inset 0px 1px rgba(255,255,255,0.2), 0 0 5px rgba(247, 0, 101, 0.5);}

这是它在所有其他主要浏览器（IE8-10、Chrome、FF 和 Opera）中的样子：

http://jsfiddle.net/vpF27/

无论父容器的宽度如何，父母的宽度都只会延伸到它的孩子的组合宽度，但是......在逛IE7和他的哥哥们破坏了这个地方并决定

.roomsLeft

需要填充整个父级，任何父级。

现在我已经尝试将罪魁祸首从我的项目上下文中排除（并远离任何其他可能干扰的项目）并在单独的文件中运行 css 和 html，希望缩小任何问题，但不幸的是这没有解决任何问题，问题仍然存在。

你们能提供的任何帮助都会很棒。

谢谢。

编辑：希望fiddle 能够提供更多有关 IE7 内部情况的背景信息。在所有其他浏览器中，添加

display:block;

到

.roomsLeft

解决问题

Answer 1

试试这个方法：

.button { display:inline-block; *display:inline; zoom:1;  /*float:right;*/ }

JSFiddle

移除浮动，用 display-inline-block 改变它；并切换元素的html放置。