IE7의 이상한 플로트 동작

Question

제목과 도구 버튼이 들어있는 헤더 바가있는 간단한 상자를 만들고 싶습니다. 다음 마크 업이 있습니다.

<div style="float:left">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; width: 200px; background-color: red;">content</div>
</div>

이것은 Firefox와 Chrome에서 잘 렌더링됩니다.

http://www.boplicity.nl/images/firefox.jpg

그러나 IE7은 완전히 엉망이되어 오른쪽 플로트 요소를 페이지의 오른쪽에 놓습니다.

http://www.boplicity.nl/images/ie7.jpg

이 문제를 해결할 수 있습니까?

Answer 1

가장 바깥 쪽 div에서 너비를 지정합니다. 콘텐츠 DIV의 폭이 상자의 총 너비라는 것을 의미하는 경우 가장 바깥 쪽 DIV에 추가하여 (선택적으로) 컨텐츠에서 제거하십시오.

<div style="float:left; width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>

Answer 2

이것은 단지 빠른 답변이므로, 제대로 작동하지 않으면 손을 잡고 있습니다. 너비보다 최소 폭을 추가하면 Marko의 솔루션이 작동 할 것이라고 생각합니다. IE6을 수용하려는 경우 최소 폭이 IE6에 의해 지원되지 않고 후손이므로 해킹을 사용해야 할 수도 있습니다.

따라서 이것은 IE7 및 기타 현대 브라우저와 함께 작동해야합니다. 최소 폭을 적절한 것으로 설정하십시오.

<div style="float:left; min-width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>

Answer 3

jQuery를 사용하여 비이 브라우저의 동작을 모방했습니다.

    // IE fix for div widths - size header to width of content
    if (!$.support.cssFloat) {
        $("div:has(.boxheader) > table").each(function () {
                $(this).parent().width($(this).width());
        });
    }

Answer 4

넣어보십시오 position:relative; 부모 요소 및 아동 요소에. 그것은 나에게 문제를 해결했다.

Answer 5

최근에 오른쪽으로 떠 다니는 요소가 다른 요소 앞에 DIV와 함께 추가되어야한다는 것을 알아야합니다. 이것은 변화 라인을 추가하지 않고 가장 쉬운 수정입니다.

<div style="background-color:blue; padding: 1px; height: 20px;">
    <div style="float: right; background-color:green;">title</div>
    <div style="float: left; background-color:yellow;">toolbar</div>
</div>

Answer 6

이것을 만드십시오 <div style="background-color:blue; padding: 1px; height: 20px;> 2 개의 떠 다니는 div의 부모 clear:all