結局IE9なんてのが生きてるからあまり意味が無いような気がするんだけどどうなんでしょう？
ie
IEの後方互換モードにしてやられた
新しいMBPにVirtual Machine (VM), Windows Virtual PC & BrowserStack : Microsoft Edge Dev（旧modern.IEなのか？）からDLしたIE11を入れて表示確認をするとメディアクエリーが死んでた。というかCSSがめちゃくちゃというか。
実機のWin10を出してきて、Microsoft Edgeで表示させるとchromeやfirefoxと同じように意図した表示になってた。
しかしIEで確認するとやっぱりCSSがおかしい。
原因は後方互換モード
何時間か悩んでもさっぱり理由がわからず、そこでやっとF12キー押してみたら、CSSが有効にならない理由が分かりました。
IE7が規定って…
VBの方も同じ理由でダメだった模様。
一応、headタグ内に…
|
1 |
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> |
て書いてあったけど
残念ながらコンディショナルコメントの中にあったから効果がなかったようだ。
|
1 2 3 |
<!--[if lt IE 9]> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <![endif]--> |
はぁ…もう大失敗…
contentを使って吐き出す連番にcjk-ideographicを指定していたら
cjk-ideographicてば
css2で実装されて、
2.1で一時削除されたけど
3で復活したもんだと思っていたらIEが対応してなかった。
firefox（やその他のブラウザー）での表示
IE11での表示
IETester v0.4.8 で IE9正式版をプレビュー出来るようにするメモ
![[image]testdrive downloads、IE10 Platform Preview 1が既に。。。](http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110417_4.png "testdrive downloads、IE10 Platform Preview 1が既に。。。")
新しいPCになってIE9preview版を使えるようになったけど
どうせIE9正式版がすぐに出るんだろうって事でインストールを放置してました。
でつい先日IE9日本語正式版が公開されてインストールしてみたんだけど
IE9をインストールすれば、IETesterで勝手に使えるようになるわけじゃないんですね
IE9日本語正式版をIETesterで使えるようにする
評価版の場合、iepreview.exe.localをIEtestのIE9フォルダにぶっこんでから
ietester.ie9.exe.localにリネームすればおkだったようだけど
正式版にはiepreview.exe.localっちゅーモノがない。
じゃあどうすればいいの？
そのままInternet Explorerフォルダをぶち込めばおkという事なので
|
1 2 |
Windows7 64bitの例 C:\Program Files (x86)\Internet Explorer |
を
|
1 2 |
Windows7 64bitの例 C:\Program Files (x86)\Core Services\IETester\ie9 |
にコピーして、
|
1 |
ietester.ie9.exe.local |
にリネーム
![[image]最終的なietesterのie9フォルダの中身](http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110417_3.png "最終的なietesterのie9フォルダの中身")
でIE9のタブのグレーアウトが外れて
使えるようになりました。
ieやietesterのexeがあるフォルダの簡単な開き方(うちがやってる方法)
それぞれの[アイコンを右クリック] – [プロパティ] – [ファイルの場所を開く]
![[image]IE](http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110417_1.png "IE")
![[image]IETester](http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110417_2.png "IETester")
li内のaをdisplay:blockした時IE6でmargin-bottomぽいところが広がる
liの中のaタグにdisplay:blockを指定して
クリック出来る部分を広げた時
IE6で下marginが広がってしまった。
みた感じaタグのmargin-bottomが拡張されている風だけど
marginを0にしても消えない。
どうもこれは、hasLayoutがtrueじゃないから起こるみたいで
普段はaタグにwidthを指定してるから発生してなかった。
(widthに値が入ってればhasLayoutがtrueになる)
今回は_zoom:1を追加して対処。
他にhasLayoutをtrueにするには
hasLayout Property (A, ABBR, ACRONYM, …)
CSS property Value display inline-blockheight any value float
leftorrightposition absolutewidth any value -ms-writing-mode tb-rlzoom any value
ブラウザの表示倍率を無理やり100%に見せる（ただしIE限定、動作確認は8のみ）
サンプル / http://sakurachiro.com/_exercise/html_css/zoom1/index.html
（IEで表示倍率を変更すると確認出来ます）
ブラウザの表示倍率をリセットする方法は無いかな？と試行錯誤してみました。
ちょっと調べてみるとscreen.devicexdpiってのを使うと画面のdpiがわかるみたい
参考にさせてもらったページ
javascript screen deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI
deviceXDPI Property (screen, Screen Constructor)
これでできる！ クロスブラウザJavaScript入門：第19回 CSSOM View Module解説
windowsは96でIEの表示を400%にしてる時は384。
そこに直接数字を入れたらコントロールできるかのか？と
screen.devicexdpi=96;みたいにしても反応なし。
読み取るだけなのか、使い方を間違ってるのかとにかくこの方法じゃ出来なかった。
なのでzoomプロパティを使って拡大してる分を縮小させてみる事に。
こんな感じ
|
1 2 3 4 5 6 7 8 9 10 11 |
function cz(){ if (screen.deviceXDPI !=96) { var dxd=screen.deviceXDPI; var nowMagniFication=dxd/96; var chgZoom=1/nowMagniFication; document.body.style.zoom=chgZoom; document.body.style.width=document.body.clientWidth*nowMagniFication+"px"; } } window.onload=cz; |
zoomを1になるようにしても
横幅が拡大した時のサイズにあわせて変更されちゃうので
document.body.clientWidthを倍率に合わせて拡張
スクロールバーが表示されるのでbodyにoverflow-x:hidden;を指定して切捨て。
window.onloadとwindow.onresizeで呼び出してみたけど
書き方が悪いのかwindow.onresizeがあると横幅が異常に広がってしまうので削除した。
なんとなくokぽい感じがしないでもないけど
上下marginがあると拡大したままになってしまうのよね、これ。
縦のスクロールも伸びっぱなしでした。
ん～もうちょっと頑張らないと使い物にならないかなぁ。
IE6 CSS Fixer
ie6fixer – onderhond.com
普通のcssからIE6用のcssを吐き出してくれるサービス、現在バージョン0.95。
例えば
IE6だと左右のmarginが40pxになってしまう以下の記述
|
1 2 3 4 |
#test{ margin:20px; float:left; } |
これをie6 css fixerで変換させると
(select your master stylesheetのpaste your complete master stylesheetを選択してgive me my ie6 fixesをクリック)
|
1 2 |
/* add display:inline to floated elements */ #test {display:inline;} |
なんてcssを吐き出してくれる。
これを保存してコンディショナルコメントでie6だけ読み込むようにすれば対策完了。
でもって、最初からdisplay:inline;が付けてる場合は、新たにdisplay:inline;を吐き出さないのかな？と試してみたけどdisplay:inline;を吐き出してた。
というか、
|
1 2 3 |
#test{ float:left; } |
を変換すると
|
1 2 |
/* add display:inline to floated elements */ #test {display:inline;} |
を吐き出してた。
むむむ？