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은, 크롬, FF & 오페라)의 모습의 바이올린의 재 :

http://jsfiddle.net/vpF27/

부모가 자녀의의 결합 폭으로 뻗어 폭에 상관없이 부모 컨테이너의 폭은, 그러나 ...에서이 장소를 난파 IE7과 그의 세 형제를 산책하고

.roomsLeft 

전체 부모, 어떤 부모를 채우기 위해 필요하다고 결정한다.

지금 나는 내 프로젝트의 컨텍스트에서 (그리고 방해 할 수도있는 다른 항목에서) 범인을 잡으려고 노력했지만 문제를 좁히기를 바라고 별도의 파일에서 CSS와 HTML을 실행했지만 불행하게도 이것은 아무 것도 해결하지 못했지만 문제는 여전히 지속됩니다.

여러분이 제공 할 수있는 도움이 환상적입니다.

감사합니다.

편집 : 잘하면이 fiddle은 IE7 내부에서 일어나는 일에 대해 좀 더 자세히 설명합니다. 그것을 변경,

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

JSFiddle

는 플로트를 제거 : 다른 모든 브라우저에서,

.roomsLeft 

에

display:block; 

를 추가하면 문제

Answer 1

시도 이런 식으로 해결 재치 h display-inline-block; 요소의 html 배치 전환.