Hatena::ブログ(Diary)

ゆちの備忘録

2012/07/26

IE−IEでfirebugみたいなこと。

ajaxで生成されたソースをチェックしたいと思ったときは、いつもfirefoxでfirebugを使って確認していたんですが、

IEでもそれっぽい機能があるということを発見したので(今まで気づいてなかっただけ…)メモ。

※IE9使用。IE8以前にもあったのかどうかは不明。


ソースを表示したいページを開いて、F12キー(開発ツール)押下。

※この時、ページを開くだけではF12押してもダメ。アドレスバーかタブを一回クリックしておくと良いみたい。

専用ウィンドウがひらくので、htmlタブを確認。

html構造の表示がメインで、テキスト関係は、文字列-○○という表示になるようです。ちょっと見にくいかも。

毎回firebugを立ち上げていたので、IEだけでチェックできるようになって良かった☆

<追記1>

htmlタブの上部に並んでるアイコンの内、「スタイル付き要素ソース」や「編集」アイコンを使うと、選択した部分のソース表示というのが

できるみたいです。

▼「スタイル付き要素ソース」

htmlタブに表示されるソースの中から

動的に生成された要素のタグ部分を探して選択(この時、ブラウザでは、該当する箇所が枠で囲まれるようです)→アイコンクリック

これは、見たいところだけ限定して表示したい時に良いのかも。

▼「編集」

左のブロック内がツリー表示(?)からソース表示に切り替わる。

こっちの方がラクでした。


<追記2>

ソースを表示したいページで右クリック→「要素の検査(L)」でも開発ツールが開いて動的に生成されたソースを確認できました。知らなかった…

※IE11で確認

(2014.3.25編集)

2012/07/20

CSS−Tableのヘッダ固定

tableのヘッダ固定については、今までexpressionを使った方法で指定していたんですが

IE8(標準モード)からは対応してないようなので、他の方法を試してみた結果、

こちらで紹介されていたやり方が一番しっくりきたのでメモ。

 紹介されているサンプルはヘッダが1行の場合。ヘッダが複数行の場合は、theadにheight設定すると上手くいきました。

 注)doctypeの種類によっては効かない


※訂正 2013.1.25※ヘッダが複数行の場合

ヘッダが複数行の場合は、theadにheight設定よりもやはり

thead内のthやtdにそれぞれ高さ指定しておいた方が良さそう。

theadにheight設定だけだと、閲覧環境によってはイマイチな表示に…

ex)

IE9,FF,chromeだとO。th,tdの高さはtheadのheightに合わせて自動調整されるみたいです

IE8だと△。th,tdの高さが未指定なのでペッタンコな行に。

※参考:CSS Expressions のサポート終了について

▼css(自作サンプル)

▼html

Connection: close