IE 6의 Ext.Panel bbar 관련 너비 문제

StackOverflow https://stackoverflow.com/questions/90181

문제

ExtJS 프레임워크를 사용하는 IE6에서 디스플레이 결함이 발생했습니다.- 누군가가 나에게 올바른 방향을 알려줄 수 있기를 바랍니다.

다음 예에서 패널의 bbar는 IE6에서 연결된 패널보다 2em 더 좁게 표시됩니다(왼쪽 정렬). Firefox에서는 패널과 동일한 너비로 표시됩니다.

누구든지 이 문제를 해결하는 방법을 제안할 수 있나요?

패널 너비를 ems로 지정하거나 패딩을 픽셀로 지정하여 문제를 해결할 수 있는 것 같지만 아래에 나와 있는 대로 작동할 것으로 예상됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all-debug.js"></script>
    <script type="text/javascript">

    Ext.onReady(function(){        
        var main = new Ext.Panel({
            renderTo: 'content',
            bodyStyle: 'padding: 1em;',
            width: 500,
            html: "Alignment issue in IE - The bbar's width is 2ems less than the main panel in IE6.",
            bbar: [
                    "->",
                {id: "continue", text: 'Continue'}
            ]
        });
    });

    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>
도움이 되었습니까?

해결책

문제는 사용자 정의 bodyStyle 패딩에서 발생합니다.패널 내용은 더 커지지만 도구 모음은 그렇지 않습니다.

가능한 해결책 중 하나는 다음과 같이 Ext 패널을 추가로 중첩하는 것입니다.

    var main = new Ext.Panel({
        renderTo: 'content',
        width: 500,
        items: {
            bodyStyle: 'padding: 1em;',
            border: false,
            html: "Now alignment is fine."
        },
        bbar: [
                "->",
            {id: "continue", text: 'Continue'}
        ]
    });

국경:이중 경계를 피하려면 false가 필요합니다.

다른 팁

어쩌면 bbar의 너비를 강제로 조정해야 할 수도 있습니다.

main.getBottomToolbar().setWidth(500)

패널 생성 직후?

하지만 문제는 bbar가 내부로 렌더링된다는 것입니다. div 따라서 브라우저마다 외부 패딩을 다르게 해석합니다.

또한 설정을 시도할 수도 있습니다 padding 바의 -1em.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top