2009-02-02 4 views
4

내 페이지에 div을 중심에두고 특정 너비가 있지만 콘텐츠가 필요할 경우 그 너비 이상으로 확장하고 싶습니다. 나는 다음과 같이이 일을하고있다 :HTML/CSS : 최소 너비로 가운데 맞춤 div 만들기

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <style type="text/css"> 
      .container-center { 
       text-align: center; 
      } 
      .container-minwidth { 
       min-width: 5em; 
       display: inline-block; 
       border: 1px solid blue; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container-center"> 
      <div class="container-minwidth"> 
       a 
      </div> 
     </div> 
    </body> 
</html> 

이 파이어 폭스/사파리에서 잘 작동하지만,하지 display: inline-block을 이해하지 못하는 IE6에. IE6에서도이 작업을 수행하는 방법에 대한 조언이 있습니까?

+4

IMO IE6에서는 나빠질 것입니다. –

답변

4

완벽한 해결책은 아니지만 나는 IE6의 부족한 점에 대해 언급함으로써 분 너비에 대한 지원을받지 못했다.

<style type="text/css">    
      .container-minwidth { 
       min-width: 5em; 

       width: auto !important; 
       width: 500px; /* IE6 ignores the !important tag */ 

       /* would help for expanding content if it blows past 500px; */ 
       overflow:auto; 

       display: inline-block; 
       border: 1px solid blue; 
      }   
</style> 

이 상황에서 도움이 될 수있는 다른 태그는 오버플로 태그입니다.

1

실제로 알레산드로 IE6은 display: inline-block을 이해하지만 코드에 대해 이해할 수없는 내용은 min-width입니다. many hacks to get this to work이 있지만 그 중 어떤 것도 추천하지 않습니다. 그것들 중 하나를 사용하려면 다른 표준 브라우저를 방해하지 않도록 IE6 특정 스타일 시트에 넣으십시오.

0
<style type="text/css">    
     .container-minwidth { 
      min-width: 5em; 
      _width: 500px; 
      white-space:nowrap; 

      display: inline-block; 
      *display:inline; 
      *zoom:1; 

      border: 1px solid blue; 
     }   
</style> 
+0

OP의 혜택에 대한 답을 설명하고 싶을 수 있습니다. – Luca

관련 문제