Как установить минимальную высоту для div в IE7?

Мне нужно установить минимальную высоту div. В Firefox все хорошо, но у меня проблемы с IE7 - непредвиденное большое пространство.

ul, il {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

    .p_block{   
        color: #336699;
        font-size: 14px;
        min-height: 18px;
    }

<ul>
    <li><a href="#"><div class="p_block">text</div></a></li>
    <li><a href="#"><div class="p_block">text</div></a></li>
    <li><a href="#"><div class="p_block">text</div></a></li>
    <li><a href="#"><div class="p_block">text</div></a></li>
</ul>

Странно, если я удалю padding: 0px; из ul, li, все будет хорошо. Почему?

Ответы

Ответ 1

используйте этот CSS для IE и FF

  .p_block{   
        color: #336699;
        font-size: 14px;
        min-height: 18px;
        height:18px !important;
    }

Ответ 2

@Chinmayee, проблема с этим решением заключается в том, что высота элемента не сможет увеличиться до 18px в firefox и нескольких других.

Хорошее кросс-браузерное решение для минимальной высоты:

{
height: auto !important;
height: 200px;
min-height: 200px;
}

В основном,
Строка №1: большинство современных браузеров понимают! Важно, поэтому не будут перезаписывать свойство в следующей строке.

Линия № 2: поскольку старые браузеры не знают! важно, это должна быть заданная высота. Старые браузеры позволят элементу расти, если не существует набора свойств переполнения:

Линия № 3: Современные браузеры понимают минимальные и важные. Поэтому современные браузеры понимают высоту: авто и минимальную высоту: 200 пикселей, а старые браузеры понимают высоту: 200 пикселей; но позволит элементу расти;)

Ответ 3

Вот решение, которое я предпочитаю:

.p_block{   
        color: #336699;
        font-size: 14px;
        min-height: 18px;
}

Затем для IE используйте это:

.p_block{   
        height: 18px;
}

IE обрабатывает высоту как минимальную высоту, поэтому она будет расти.

Вы можете настроить таргетинг на IE, включив в него определенный файл IE6 и 7 CSS, как показано ниже (идет в <head> )

<!--[if IE 6]>
        <link rel="stylesheet" type="text/css" href="css/ie6-hacks.css" />
        <script type="text/javascript">
            // IE6 Background Hover Flicker Fix
            try {
                document.execCommand('BackgroundImageCache',false,true);
                }catch(ignoreme){
            }
        </script>
    <![endif]-->
    <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie7-hacks.css" />
    <![endif]-->

Ответ 4

Отпустите auto height и важный и добавьте * перед height.

Это будет применяться только к IE7 и ниже.

.p_block{  
    min-height: 30px; 
    *height: 30px; 
}

Это то, что я использовал, IE7 не будет использовать min-height, но будет устанавливать height на 30px и при необходимости будет больше.