it-swarm.com.ru

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

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

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

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

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

Благодарю.

32
Ryan Smith

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

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

31
Jacco

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

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

*float: left; 

«*» указывает только IE

9
Jonathan Hendler

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

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

4
joelhardi

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

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

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

4
risingfish

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

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

4
eyelidlessness

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

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

3
Herb Caudill

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

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

1
stack collision with heap

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

0
Phill Healey

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

0
Mike6679