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

Question

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

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

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

Мне бы хотелось сделать это без добавления хака в JavaScript для тестирования IE.Какие-либо предложения?

Спасибо.

Answer 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>

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

Answer 2

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

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

*float: left; 

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

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

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

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

Answer 10

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