IE7 и свойство CSS table-cell

Что ж, IE7 не имеет display: table(-cell/-row), так что вам придется придумать что-то еще или настроить таргетинг на браузер (что я согласен, это плохой взлом). В качестве быстрого исправления (я не знаю, чего вы пытаетесь достичь с точки зрения внешнего вида) вы можете попробовать display: inline-block и посмотреть, как он выглядит.

Может быть, придумать способ сделать display: block и вместо этого решить проблему «Firefox делает это странно»? Можете ли вы точно описать, что вы имеете в виду под странным рендерингом?

Вам никогда не понадобится Javascript для тестирования IE, используйте условные комментарии.

Вы можете посмотреть на решение, которое эти парни придумал для обработки табличного отображения в IE.

Я использую CSS более десяти лет, и у меня никогда не было возможности использовать display: table-cell, и я использую условные комментарии только для того, чтобы скрыть расширенные эффекты от IE6.

Я подозреваю, что другой подход решит вашу проблему внутренне кроссбраузерным способом. Можете ли вы открыть отдельный вопрос, описывающий эффект, которого вы пытаетесь достичь, и опубликовать HTML и CSS, которые в настоящее время работают в Firefox?

Хороший способ решить эту проблему, установив значение display на '':

<script type = "text/javascript">
<!--
function toggle( elemntId ) {
    if (document.getElementById( elemntId ).style.display != 'none') {
        document.getElementById( elemntId ).style.display = 'none';
    } else {
        document.getElementById( elemntId ).style.display = '';
    }
    return true;
}
//-->
</script>

Пустое значение приводит к тому, что стиль возвращается к значению по умолчанию. Это решение работает во всех основных браузерах.

У меня была такая же проблема, и я использовал

*float: left; 

"*" обозначает только IE

Я решил это с помощью jQuery:

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tablecell").wrap("<td />");
    $(".tablerow").wrap("<tr />");
    $(".table").wrapInner("<table />");
  }
});

в приведенном выше сценарии предполагается, что у вас есть div, использующие такие стили, как:

<style>
.table     { display: table; }
.tablerow  { display: table-row; }
.tablecell { display: table-cell; }
</style>

Использование встроенного блока хорошо подходит для такого рода вещей. Нет, IE 6 и IE 7 технически не имеют display: inline-block, но вы можете воспроизвести поведение с помощью следующих стилей:

div.show-ib {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

Ключ к этому - «zoom: 1» переключает свойство «hasLayout» на элементе, которое изменяет способ отображения браузером элемента уровня блока. Единственная проблема со встроенным блоком - у вас не может быть поля меньше 4 пикселей.

Пример кода для условных комментариев, которые любезно опубликовал пользователь.

«[if lt IE 8]» работает, только если браузер IE ниже IE8, потому что IE8 делает это правильно. С условными комментариями IE7 размещает DIV красиво по горизонтали ... HTML:

 <div class = "container">
    <!--[if lt IE 8 ]><table><tr><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class = "link"><a href = "en.html">English</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div tabindex = "0" class = "thumb"><img src = "pictures\pic.jpg" /></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class = "link"><a href = "de.html">Deutsch</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]></tr></table><![endif]-->
</div> 

Мой CSS

.link {
 display:table-cell;
 vertical-align:middle;
 }
 div.container {
 margin: 0 auto;
 display:table;
 }
 .thumb {
 display:table-cell;
 float: left;
 text-align: center;
 }

IE 8 и 9 Работают с CSS так же, как и FireFox. IE7 теперь выглядит так же, используя теги Table и TD & TR. На некоторых страницах IE 8 работал только 20% времени, поэтому я использовал [if lt IE 9]

Это также помогает сгладить проблемы с вертикальным выравниванием, с которыми IE7 не может справиться.

Я пробовал все, и единственный способ, которым я обнаружил, что все это кроссбраузерно, - это использовать Javascript / Jquery. Это чистое легкое решение: кликните сюда

IE7 также не поддерживает display:inline-block;. Очевидный взлом - zoom: 1; *display: inline; после вашего CSS для display:table-cell;