IE 6의 Ext.Panel bbar 폭 문제

IE6의 ExtJS 프레임 워크에서 디스플레이 결함이 발생했습니다. - 누군가가 올바른 방향으로 나를 가리킬 수 있기를 바랍니다.IE 6의 Ext.Panel bbar 폭 문제

다음 예제에서, 패널의 bbar는 Firefox에서와 같이 패널과 동일한 너비로 표시되는 IE6에서 첨부 된 패널보다 2 ems (왼쪽 정렬)로 표시됩니다.

누구든지 해결 방법을 제안 할 수 있습니까?

ems 또는 패딩 (padding)에서 패널의 너비를 픽셀 단위로 지정하여 해결할 수있는 것처럼 보이지만 아래에있는대로 작동 할 것으로 예상됩니다.

<!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>

출처

2008-09-18 Matt Sheppard

문제는 맞춤 bodyStyle 패딩에서 비롯됩니다. 도구 모음이 아니라 패널 내용이 커집니다.

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'} 
     ] 
    });

경계 :

한 가지 가능한 솔루션처럼, 더 둥지에 외장 패널 거짓 이중 접경을 방지하기 위해 필요하다.

출처

2008-09-19 17:09:05 tsg

어쩌면 당신은 bbar의 폭 강제로 시도해야합니다 :

main.getBottomToolbar()를 setWidth (500).

패널 생성 직후입니까?

하지만 문제는 bbar가 패널의 내부 div에 렌더링되어 다른 브라우저가 외부 패딩을 다르게 해석한다고 생각합니다.

또한 bbar의 패딩을 -1em으로 설정할 수 있습니다.

출처

2008-09-18 16:32:24 Thevs

IE 6의 Ext.Panel bbar 폭 문제

답변

관련 문제