HTML / CSS: создание центрированного div с минимальной шириной - PullRequest
Новая
       7

HTML / CSS: создание центрированного div с минимальной шириной

4 голосов
/ 02 февраля 2009

Я хотел бы иметь на своей странице 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 также?

Ответы [ 3 ]

4 голосов
/ 02 февраля 2009

Это не идеальное решение, но я обошел стороной некоторые проблемы 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 голос
/ 02 февраля 2009

На самом деле Alessandro IE6 действительно понимает display: inline-block, что он не понимает в вашем коде - это min-width. Есть много хаков, чтобы заставить это работать , но я бы не рекомендовал ни одного из них. Если вы собираетесь использовать какой-либо из них, обязательно поместите их в таблицу стилей IE6, чтобы она не мешала другим вашим более стандартным браузерам жалоб.

0 голосов
/ 07 мая 2012 
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...