32

ですから、アプリケーションが Firefox で問題なく動作していて、それを IE で開くと... いいえ、もう一度やり直してください。

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

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

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

ありがとう。

4

10 に答える 10

48

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>
于 2011-02-10T22:35:19.077 に答える
31

これを解決する良い方法は、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>

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

于 2009-03-14T14:14:35.933 に答える
9

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

*float: left;

「*」は IE のみを示します

于 2009-08-05T21:26:04.257 に答える
4

インラインブロックの使用は、このタイプのものに適しています。いいえ、IE6およびIE7には技術的に表示がありません：インラインブロックですが、次のスタイルで動作を複製できます。

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

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

于 2011-08-08T21:07:12.260 に答える
4

ええと、IE7にはないdisplay: table(-cell/-row)ので、何か他のことを理解するか、ブラウザのターゲティングを行う必要があります（私は同意しますが、これは悪いハックです）。簡単な解決策として（私はあなたが何を達成しようとしているのか、見た目に関してはわかりません）、display: inline-blockそれがどのように見えるかを試してみることができます。

display: block代わりに、「Firefoxがそれを奇妙にレンダリングする」という問題を解決する方法を考え出すのではないでしょうか。奇妙なレンダリングの意味を正確に説明できますか？

于 2008-10-30T02:24:21.110 に答える
4

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

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

于 2008-10-30T04:00:28.293 に答える
3

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

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

于 2008-10-30T13:49:01.273 に答える
1

ユーザー eyelidlessness が親切に投稿した条件付きコメントのコード例

"[if lt IE 8]" は、IE8 が正しく動作するため、ブラウザーが IE8 よりも低い IE である場合にのみ機能します。条件付きコメントを使用すると、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 は、Table タグと TD & TR タグを使用して同じように見えるようになりました。一部のページでは、IE 8 は 20% の時間しか機能しなかったため、[if lt IE 9] を使用しました。

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

于 2012-09-07T14:36:36.383 に答える
0

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

于 2014-05-19T19:29:59.277 に答える
0

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

于 2013-01-23T17:29:58.373 に答える