0

IE 9 に、Web 開発者メニューの [検査] オプションを選択して、ページの各要素にどの css クラスが適用されているかを確認できる Firefox と同様の方法があるかどうか疑問に思っています。IE 9 の F12 機能で、[表示] -> [クラスと ID 情報] を選択できることに気付きましたが、css の詳細が表示されません。

私の問題は、自分のサイトが IE と FF でまったく異なって見えることで、デバッグしようとしています。他の提案をいただければ幸いです。ありがとう。

編集1：

具体的な問題は、FF では、すべてのコンテンツが中央に配置されるように左と上に余白があることです。ただし、IE ではすべてが左揃えになります。ページの最初の div を見始めることにしました。
互いにネストされた div がいくつかありますが、原因を見つけた可能性があります。

IE では、div の 1 つの css は次のようになります。

#regionHeader .wrapper {
  overflow:hidden;
}
.wrapper {
  margin:0 auto;
  max-width:1140px;
  min-width:801px;
  width:auto;
}
.wrapper {
  margin:0 auto;
}
.wrapper {
  margin:0 auto;
}
.wrapper {
  zoom:1;
}
.wrapper:after {
  clear:both;
}
.wrapper:after {
  display:table;
}
.wrapper:before {
  display:table;
}

div {
  -webkit-text-size-adjust:none;
  border-bottom:0;
  border-left:0;
  border-right:0;
  border-top:0;
  margin:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
  padding-top:0;
}

しかし、FF の同じものには次のスタイルがあります。

#regionHeader .wrapper {
  overflow:hidden;
}

.wrapper {
  margin:0 auto;
  min-width:320px;
}

.wrapper, .clearfix, #content {
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, figure, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border:0 none;
  margin:0;
  padding:0;
}

max-width:1140px; に注意してください。最小幅しかない IE と FF で。それが問題の原因ですか？残念ながら、これは私のコードではありません...

4

3 に答える 3

4

F12 を押して、ツールボックスのポインター ボタンをクリックし、検査する要素をクリックします。その要素の css は、dom-window の右側にある必要があります。そうでない場合は、右側のウィンドウの上にある [スタイル] ボタンをクリックしてください。

ここに画像の説明を入力

于 2013-01-17T14:55:04.820 に答える
1

Firebuglite は IE6+ と互換性があり、ここからダウンロードできます。

https://getfirebug.com/firebuglite

于 2013-01-17T14:07:51.463 に答える
0

F12 を押して IE9 開発者ツールを起動します。

または、TOOLS - F12 DEVELOPER TOOLS を選択します。

于 2013-01-17T14:06:33.530 に答える