2009-02-02 2 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> 

Это прекрасно работает на Firefox/Safari, но не в IE6, который не понимает display: inline-block. Любые советы о том, как сделать эту работу над 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

Смежные вопросы