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

Ответ 1

Хороший способ решить эту настройку: 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>

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

Ответ 2

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

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

приведенный выше script предполагает, что у вас есть divs с использованием стиля, например:

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

Ответ 3

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

*float: left; 

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

Ответ 4

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

Может быть, выяснить способ сделать display: block и решить проблему "Firefox, отображающий это странно"? Можете ли вы описать, что вы подразумеваете под фантастическим рендерингом?

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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

"[if lt IE 8]" работает только в том случае, если браузер IE ниже IE8, потому что IE8 делает это правильно. С условными комментариями IE7 устраивает DIVs горизонтально горизонтально... 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 не может обрабатывать.

Ответ 9

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

Ответ 10

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