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

Question

Так что мне просто нравится, когда мое приложение отлично работает в Firefox, но потом я открываю его в IE и ... Нет, пожалуйста, попробуйте еще раз.

Проблема, с которой я сталкиваюсь, заключается в том, что я устанавливаю свойство отображения CSS на none или table-cell с JavaScript.

Я изначально использовал display: block, но Firefox делал это странно без свойства table-cell.

Я бы хотел сделать это без добавления взлома в JavaScript для тестирования IE. Есть предложения?

Спасибо.

Answer 1

Я решил это с помощью 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>

Answer 2

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

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

Answer 3

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

*float: left; 

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

«[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 не может обработать.

Answer 9

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

Answer 10

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