web-dev-qa-db-ja.com

IE7およびCSS table-cellプロパティ

したがって、Firefoxでアプリケーションが正常に動作しているときに気に入っていますが、それをIEで開きます...いいえ、もう一度試してください。

私が抱えている問題は、CSS表示プロパティをJavaScriptでnoneまたはtable-cellに設定していることです。

最初はdisplay: blockを使用していましたが、Firefoxはtable-cellプロパティなしで奇妙にレンダリングしていました。

IEをテストするためにJavaScriptにハックを追加せずにこれを実行したいと思います。助言がありますか？

ありがとう。

csscross-browserinternet-explorer-7css-tables
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

IEのテストにJavascriptが必要になることはありません。 条件付きコメント を使用します。

IEでテーブルのような表示を処理するための解決策 these guys を考えたかもしれません。

4
eyelidlessness

私は10年以上CSSを使用しており、display：table-cellを使用する機会がありません。条件付きコメントを使用するのはIE6から高度な効果を隠すことだけです。

別のアプローチが本質的にクロスブラウザの方法であなたの問題を解決すると思う。達成しようとしている効果を説明する別の質問を開いて、現在Firefoxで動作しているHTMLとCSSを投稿できますか？

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は、FireFoxと同様にCSSで動作します。 IE7は、テーブルとTD＆TRタグを使用して同じように見えます。一部のページではIE 8は時間の20％しか機能しなかったため、[if lt IE 9]

これは、IE7で処理できない垂直方向の配置の問題を解決するのにも役立ちます。

1
stack collision with heap

IE7はdisplay:inline-block;もサポートしていません。明らかなハックは、zoom: 1; *display: inline;のc​​ssの後のdisplay:table-cell;です

0
Phill Healey

私はすべてを試してみましたが、クロスブラウザであることがわかった唯一の方法は、Javascript/Jqueryを使用することでした。これはクリーンで軽量なソリューションです： ここをクリック

0
Mike6679