1. /
  2. /
  3. ie

ie

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タグ内に…

[html]

[/html]
て書いてあったけど

残念ながらコンディショナルコメントの中にあったから効果がなかったようだ。

[html]

[/html]

はぁ…もう大失敗…

IETester v0.4.8 で IE9正式版をプレビュー出来るようにするメモ

[image]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という事なので

Windows7 64bitの例
C:\Program Files (x86)\Internet Explorer

を

Windows7 64bitの例
C:\Program Files (x86)\Core Services\IETester\ie9

にコピーして、

ietester.ie9.exe.local

にリネーム

[image]最終的なietesterのie9フォルダの中身

でIE9のタブのグレーアウトが外れて
使えるようになりました。

ieやietesterのexeがあるフォルダの簡単な開き方(うちがやってる方法)

それぞれの[アイコンを右クリック] – [プロパティ] – [ファイルの場所を開く]
[image]IE

[image]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-block
height

 any value
float

left or right
position absolute
width any value
-ms-writing-mode tb-rl
zoom 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プロパティを使って拡大してる分を縮小させてみる事に。
こんな感じ
[js]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;[/js]

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になってしまう以下の記述
[css classname=”css-sh”]
#test{
margin:20px;
float:left;
}
[/css]

これをie6 css fixerで変換させると
(select your master stylesheetのpaste your complete master stylesheetを選択してgive me my ie6 fixesをクリック)
[css classname=”css-sh”]/* add display:inline to floated elements */
#test {display:inline;}[/css]
なんてcssを吐き出してくれる。

これを保存してコンディショナルコメントでie6だけ読み込むようにすれば対策完了。

でもって、最初からdisplay:inline;が付けてる場合は、新たにdisplay:inline;を吐き出さないのかな？と試してみたけどdisplay:inline;を吐き出してた。

というか、[css classname=”css-sh”]
#test{
float:left;
}
[/css]
を変換すると
[css classname=”css-sh”]/* add display:inline to floated elements */
#test {display:inline;}[/css]を吐き出してた。
むむむ？

dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;

タイトルが全てだけど

dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;を付けるとズレなくなりました。
[html classname=”html-sh”]<dl>
<dt>乱雑</dt>
<dd>モックアップ</dd>
</dl>
[/html]
[css classname=”css-sh”]dt {
width:3em;
float:left;
}
dd {
margin-left:3em;
_zoom:1;
}[/css]

zoomの前の_はIE6用のハック
/にするとIE7以下に効く。

ショートカットをドラッグ&ドロップするだけで、大きいサイズのアイコン画像も一括抽出できる IcoFX

無料でこれは良かった。

IcoFX – The Free Icon Editor

[image]IcoFXのサイト

なにが良いかって

本体のexeをドラッグ&ドロップしなくても、アプリのショートカットからでもちゃんとアイコン画像を取り出せて楽チン。
あと256 × 256 px の大きなサイズのアイコンにも対応してる。
[options] – [languages] – [Japanese] からメニューを日本語に出来る。

[image]IcoFXにショートカットをぶち込んだところ

続きを読む