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

StackOverflow https://stackoverflow.com/questions/249103

質問

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

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

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

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

ありがとう。

役に立ちましたか？

解決

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>

値が空の場合、スタイルはデフォルト値に戻ります。このソリューションは、すべての主要なブラウザーで機能します。

他のヒント

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>

同じ問題があり、使用しました

*float: left;

＆quot; *＆quot; IEのみを示します

まあ、 IE7には display：table（-cell / -row）がありません を使用すると、他の何かを把握するか、ブラウザのターゲティングを行う必要があります（これは悪いハックです）。簡単な修正として（あなたが達成しようとしているものは、見た目でわからない）、 display：inline-block を試して、どのように見えるかを確認できます。

display：block を実行し、「Firefoxがおかしなレンダリングをする」という問題を解決する方法を考えてください。代わりに？奇妙なレンダリングの意味を正確に説明できますか？

IEのテストにJavascriptは必要ありません。条件付きコメントを使用してください。

これらの人々が思いついたソリューションを見ることができます。 IEで表のような表示を処理するため。

inline-blockの使用は、このタイプのものに適しています。いいえ、IE 6およびIE 7には技術的にdisplay：inline-blockがありませんが、次のスタイルで動作を複製できます。

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

これの鍵は「zoom：1」で、要素の「hasLayout」プロパティを切り替えて、ブラウザがブロックレベル要素をレンダリングする方法を変更します。インラインブロックの唯一の落とし穴は、4px未満のマージンを確保できないことです。

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

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

ユーザーのまぶたさが親切に投稿する条件付きコメントを含むコード例

＆quot; [if lt IE 8]＆quot;ブラウザがIE8よりもIEが低い場合にのみ機能します。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＆amp;を使用して同じようになりました。 TRタグ。一部のページでIE 8は20％の時間しか機能しなかったため、[IE 9の場合]

を使用しました

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

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top