CSS : Floating div to right는 컨테이너 div가 IE에서 화면의 전체 너비를 늘리는 원인이됩니다.

Question

비슷한 질문을 보았습니다. 대답은 보이지 않았습니다. 상위 div 내에서 요소가 오른쪽으로 떠 다니는 문제가 있습니다. div가 IE7에서 페이지의 전체 너비를 늘리는 원인이됩니다. 다른 브라우저 (Firefox 및 Chrome)에서는 이러한 현상이 발생하지 않습니다. 나는 또한 질문을 한 후에 참조 용으로 그림을 올렸다. 내가 사용하는 HTML은 아래와 같습니다 :

<div id="journal" class="journalIE"> 
    <div class="title_bar"> 
     <div> 
      Testing 
     </div> 
     <div class="actions"></div> 
     <div class="clear"></div> 
    </div> 
</div> 

이 태그들에 사용하고있는 CSS는 아래에 있습니다. 내가 위에서 언급 한 다른 사람의 질문과 제 문제 사이에 일관성이 있다는 것을 알게 된 한 가지는 부모 div의 위치 지정이 적용된 것입니다 (위의 사람은 절대적으로 고정되어 있습니다).

#journal 
{ 
    z-index: 1; 
} 

.journalIE 
{ 
    right: 1px; 
    bottom: 18px; 
    position: fixed; 
} 

#journal .title_bar 
{ 
    background: #F3F3F3; 
    border: 1px solid #C5D6E8; 
    color: #363638; 
    font-size: 11pt; 
    font-weight: bold; 
    height: 20px; 
    padding: 4px; 
    margin-bottom: 4px; 
} 

#journal .title_bar .actions 
{ 
    float: right; 
} 

.clear 
{ 
    clear: both; 
} 

'actions'클래스가 오른쪽으로 떠있었습니다. 그 플로트를 가져 가면 내 상자는 this처럼 보입니다. 하지만 float을 추가하면 전체 화면이 늘어나고 this처럼 보입니다. 이것은 다른 브라우저에서 일어나지 않기 때문에 알려진 IE 버그입니까? 그리고 그것은 나를 미치게합니다.

궁금한 분들은 'actions'div에 콘텐츠가 있었지만 루트 문제까지 모든 것을 제거했습니다.

도움을 주시면 감사하겠습니다. 매우 감사합니다.

Answer 1

수행이

<div id="journal" class="journalIE"> 
<div class="title_bar"> 
    <div class="Test"> 
     Testing 
    </div> 
    <div class="actions"></div> 
    <div class="clear"></div> 
</div> 

다음 CSS 클래스를 추가

.Test { 플로트 : 오른쪽; }

해야합니다. 작동하지 않으면 알려주세요. * A는 박스가합니다 ('폭'속성을 통해 할당 된, 또는 대체 요소의 경우 고유의 폭) 명시적인 폭을 가지고 있어야합니다 떴다 :

MNK

Answer 2

당신은 폭이 필요합니다. *

를 통해 : W3C

Answer 3

나는 당신이 "행동"DIV 함께하고 싶었던 무엇인지 설명하지 않았다, 당신이 원하는 것을 완전히 확실하지 않다,하지만 당신은에있는 "행동"사업부를 원한다면 "Testing"div 바로 옆에 떠 다니면 별도의 .floatr 클래스를 만들려고했거나 div에 직접 스타일을 적용해도 작동합니다. .floatr 클래스

.floatr { 
float: right; 
} 

은 "행동"에 그 적용 사업부 :

<div class="actions floatr"></div> 

나는 이유는 모르겠지만, "행동"다음 div에 설정 플로트를 무시 나에게 보인다 그 방식으로 설정 한 수업. 저는 개인적으로 div에 여러 클래스를 적용하는 것을 선호합니다. 다른 클래스보다 그 클래스를 재사용 할 수 있지만, 일부 브라우저는 첫 번째 클래스 다음에 선언 된 클래스를 무시할 것이라고 들었습니다. 오, 글쎄, 아직 주요 브라우저에서 그 문제에 부딪치지 않았다 ...

오 기다려.

코드를 다시 살펴 봤는데 클래스 설정 방법에 문제가 있다고 생각합니다. 귀하가 "행동"DIV 액션 놓치게되었다, CSS에 쉼표를 추가하려고 : 나는 가끔 생각

#journal .title_bar, .actions 
{ 
    float: right; 
} 

을 당신이 그것을 기대는 방식으로 동작 할 수 있는지 확인하기 위해 직접 효과를 적용 해 뭔가를 알아 내기 위해 to, 그리고 아마도 그것이 작동하지 않는다면 어떤 종류의 문법 오류라고 생각할 것입니다. ㅎ.