<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>乱雑モックアップ &#187; ie</title>
	<atom:link href="http://blog.sakurachiro.com/category/browser/ie/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.sakurachiro.com</link>
	<description>らんざつ[乱雑] （名・形動）[文]ナリ 入り乱れていること。乱れていて秩序がないこと。また、そのさま。</description>
	<lastBuildDate>Fri, 02 Dec 2011 20:09:59 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/category/browser/ie/feed/" />
		<item>
		<title>IETester v0.4.8 で IE9正式版をプレビュー出来るようにするメモ</title>
		<link>http://blog.sakurachiro.com/2011/04/ietester-ie9/</link>
		<comments>http://blog.sakurachiro.com/2011/04/ietester-ie9/#comments</comments>
		<pubDate>Sat, 16 Apr 2011 21:11:31 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[ie]]></category>
		<category><![CDATA[IE9]]></category>
		<category><![CDATA[IETester]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=2428</guid>
		<description><![CDATA[新しいPCになってIE9preview版を使えるようになったけど どうせIE9正式版がすぐに出るんだろうって事でインストールを放置してました。 でつい先日IE9日本語正式版が公開されてインストールしてみたんだけど IE9 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html" title="testdrive downloads、IE10 Platform Preview 1が既に。。。"><img src="http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110417_4.png" alt="[image]testdrive downloads、IE10 Platform Preview 1が既に。。。" title="testdrive downloads、IE10 Platform Preview 1が既に。。。" width="480" height="237" class="alignnone size-full wp-image-2432" /></a></p>
<p>新しいPCになってIE9preview版を使えるようになったけど<br />
どうせIE9正式版がすぐに出るんだろうって事でインストールを放置してました。</p>
<p>でつい先日IE9日本語正式版が公開されてインストールしてみたんだけど<br />
IE9をインストールすれば、IETesterで勝手に使えるようになるわけじゃないんですね</p>
<h3>IE9日本語正式版をIETesterで使えるようにする</h3>
<p>評価版の場合、iepreview.exe.localをIEtestのIE9フォルダにぶっこんでから<br />
ietester.ie9.exe.localにリネームすればおkだったようだけど<br />
正式版にはiepreview.exe.localっちゅーモノがない。</p>
<h4>じゃあどうすればいいの？</h4>
<p>そのままInternet Explorerフォルダをぶち込めばおkという事なので</p>
<pre>Windows7 64bitの例
C:\Program Files (x86)\Internet Explorer</pre>
<p>を</p>
<pre>Windows7 64bitの例
C:\Program Files (x86)\Core Services\IETester\ie9</pre>
<p>にコピーして、</p>
<pre>ietester.ie9.exe.local</pre>
<p>にリネーム</p>
<p><a href="http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110417_3.png" rel="shadowbox[sbpost-2428];player=img;" title="最終的なietesterのie9フォルダの中身"><img src="http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110417_3-480x138.png" alt="[image]最終的なietesterのie9フォルダの中身" title="最終的なietesterのie9フォルダの中身" width="480" height="138" class="alignnone size-large wp-image-2431" /></a></p>
<p>でIE9のタブのグレーアウトが外れて<br />
使えるようになりました。</p>
<h3>ieやietesterのexeがあるフォルダの簡単な開き方(うちがやってる方法)</h3>
<p>それぞれの[アイコンを右クリック] &#8211; [プロパティ] &#8211; [ファイルの場所を開く]<br />
<a href="http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110417_1.png" rel="shadowbox[sbpost-2428];player=img;" title="IE"><img src="http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110417_1.png" alt="[image]IE" title="IE" width="435" height="479" class="alignnone size-full wp-image-2430" /></a></p>
<p><a href="http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110417_2.png" rel="shadowbox[sbpost-2428];player=img;" title="IETester"><img src="http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110417_2.png" alt="[image]IETester" title="IETester" width="435" height="479" class="alignnone size-full wp-image-2429" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2011/04/ietester-ie9/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2011/04/ietester-ie9/" />
	</item>
		<item>
		<title>li内のaをdisplay:blockした時IE6でmargin-bottomぽいところが広がる</title>
		<link>http://blog.sakurachiro.com/2011/02/ie6-displayblock/</link>
		<comments>http://blog.sakurachiro.com/2011/02/ie6-displayblock/#comments</comments>
		<pubDate>Fri, 18 Feb 2011 09:06:23 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[html/css]]></category>
		<category><![CDATA[ie]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=2331</guid>
		<description><![CDATA[liの中のaタグにdisplay:blockを指定して クリック出来る部分を広げた時 IE6で下marginが広がってしまった。 みた感じaタグのmargin-bottomが拡張されている風だけど marginを0にして [...]]]></description>
			<content:encoded><![CDATA[<p>liの中のaタグにdisplay:blockを指定して<br />
クリック出来る部分を広げた時<br />
IE6で下marginが広がってしまった。</p>
<p>みた感じaタグのmargin-bottomが拡張されている風だけど<br />
marginを0にしても消えない。</p>
<p>どうもこれは、hasLayoutがtrueじゃないから起こるみたいで<br />
普段はaタグにwidthを指定してるから発生してなかった。<br />
(widthに値が入ってればhasLayoutがtrueになる)</p>
<p>今回は<span class="note2">_zoom:1</span>を追加して対処。</p>
<p>他にhasLayoutをtrueにするには<br />
<a href="http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx">hasLayout Property (A, ABBR, ACRONYM, &#8230;)</a></p>
<blockquote cite="http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx" title="hasLayout Property"><table>
<tbody>
<tr>
<th>CSS property</th>
<th>Value</th>
</tr>
<tr>
<td>
            <a href="http://msdn.microsoft.com/en-us/library/ms530751%28v=VS.85%29.aspx">display</a></p>
</td>
<td>
            <code>inline-block</code>
          </td>
</tr>
<tr>
<td>
            <a href="http://msdn.microsoft.com/en-us/library/ms533779%28v=VS.85%29.aspx">height</a></p>
</td>
<td>any value</td>
</tr>
<tr>
<td>
            <a href="http://msdn.microsoft.com/en-us/library/ms530755%28v=VS.85%29.aspx">float</a>
          </td>
<td>
<p>            <code>left</code> or <code>right</code></td>
</tr>
<tr>
<td>
            <a href="http://msdn.microsoft.com/en-us/library/ms531140%28v=VS.85%29.aspx">position</a>
          </td>
<td>
            <code>absolute</code>
          </td>
</tr>
<tr>
<td>
            <a href="http://msdn.microsoft.com/en-us/library/ms535144%28v=VS.85%29.aspx">width</a>
          </td>
<td>any value</td>
</tr>
<tr>
<td>
            <a href="http://msdn.microsoft.com/en-us/library/ms531187%28v=VS.85%29.aspx">-ms-writing-mode</a>
          </td>
<td>
            <code>tb-rl</code></p>
</td>
</tr>
<tr>
<td>
            <a href="http://msdn.microsoft.com/en-us/library/ms531189%28v=VS.85%29.aspx">zoom</a>
          </td>
<td>any value</td>
</tr>
</tbody>
</table>
</blockquote>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2011/02/ie6-displayblock/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2011/02/ie6-displayblock/" />
	</item>
		<item>
		<title>ブラウザの表示倍率を無理やり100%に見せる（ただしIE限定、動作確認は8のみ）</title>
		<link>http://blog.sakurachiro.com/2010/12/screen-devicexdpi/</link>
		<comments>http://blog.sakurachiro.com/2010/12/screen-devicexdpi/#comments</comments>
		<pubDate>Tue, 07 Dec 2010 14:57:36 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[ie]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[とりあえずメモ]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=2302</guid>
		<description><![CDATA[サンプル / http://sakurachiro.com/_exercise/html_css/zoom1/index.html （IEで表示倍率を変更すると確認出来ます） ブラウザの表示倍率をリセットする方法は無いか [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://sakurachiro.com/_exercise/html_css/zoom1/index.html" target="_blank">サンプル / http://sakurachiro.com/_exercise/html_css/zoom1/index.html</a><br />
（IEで表示倍率を変更すると確認出来ます）</p>
<p>ブラウザの表示倍率をリセットする方法は無いかな？と試行錯誤してみました。</p>
<p>ちょっと調べてみるとscreen.devicexdpiってのを使うと画面のdpiがわかるみたい</p>
<p>参考にさせてもらったページ<br />
<a href="http://javascript.gakaa.com/screen-devicexdpi-2-0-deviceydpi-2-0-logicalxdpi-2-0-logicalydpi.aspx">javascript screen deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI</a><br />
<a href="http://msdn.microsoft.com/en-us/library/ms533721(VS.85).aspx">deviceXDPI Property (screen, Screen Constructor)</a><br />
<a href="http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0019">これでできる！ クロスブラウザJavaScript入門：第19回　CSSOM View Module解説</a></p>
<p>windowsは96でIEの表示を400%にしてる時は384。</p>
<p>そこに直接数字を入れたらコントロールできるかのか？と<br />
<em>screen.devicexdpi=96;</em>みたいにしても反応なし。<br />
読み取るだけなのか、使い方を間違ってるのかとにかくこの方法じゃ出来なかった。</p>
<p>なのでzoomプロパティを使って拡大してる分を縮小させてみる事に。<br />
こんな感じ</p>
<pre class="brush: jscript; title: ; notranslate">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+&quot;px&quot;;
   }
}
window.onload=cz;</pre>
<p>zoomを1になるようにしても<br />
横幅が拡大した時のサイズにあわせて変更されちゃうので<br />
document.body.clientWidthを倍率に合わせて拡張</p>
<p>スクロールバーが表示されるのでbodyにoverflow-x:hidden;を指定して切捨て。<br />
window.onloadとwindow.onresizeで呼び出してみたけど<br />
書き方が悪いのかwindow.onresizeがあると横幅が異常に広がってしまうので削除した。</p>
<p>なんとなくokぽい感じがしないでもないけど<br />
上下marginがあると拡大したままになってしまうのよね、これ。</p>
<p>縦のスクロールも伸びっぱなしでした。<br />
ん～もうちょっと頑張らないと使い物にならないかなぁ。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2010/12/screen-devicexdpi/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2010/12/screen-devicexdpi/" />
	</item>
		<item>
		<title>IE6 CSS Fixer</title>
		<link>http://blog.sakurachiro.com/2010/12/ie6-css-fixer/</link>
		<comments>http://blog.sakurachiro.com/2010/12/ie6-css-fixer/#comments</comments>
		<pubDate>Mon, 06 Dec 2010 13:35:51 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[html/css]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[ツール/アプリケーション]]></category>
		<category><![CDATA[IE6]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=2300</guid>
		<description><![CDATA[ie6fixer &#8211; onderhond.com 普通のcssからIE6用のcssを吐き出してくれるサービス、現在バージョン0.95。 例えば IE6だと左右のmarginが40pxになってしまう以下の記述  [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.onderhond.com/tools/ie6fixer/">ie6fixer &#8211; onderhond.com</a><br />
普通のcssからIE6用のcssを吐き出してくれるサービス、現在バージョン0.95。</p>
<h3>例えば</h3>
<p>IE6だと左右のmarginが40pxになってしまう以下の記述</p>
<pre class="brush: css; class-name: css-sh; title: ; notranslate">
#test{
margin:20px;
float:left;
}
</pre>
<p>これをie6 css fixerで変換させると<br />
(select your master stylesheetのpaste your complete master stylesheetを選択してgive me my ie6 fixesをクリック)</p>
<pre class="brush: css; class-name: css-sh; title: ; notranslate">/* add display:inline to floated elements */
#test {display:inline;}</pre>
<p>なんてcssを吐き出してくれる。</p>
<p>これを保存してコンディショナルコメントでie6だけ読み込むようにすれば対策完了。</p>
<p>でもって、最初からdisplay:inline;が付けてる場合は、新たにdisplay:inline;を吐き出さないのかな？と試してみたけどdisplay:inline;を吐き出してた。</p>
<p>というか、
<pre class="brush: css; class-name: css-sh; title: ; notranslate">
#test{
float:left;
}
</pre>
<p>を変換すると</p>
<pre class="brush: css; class-name: css-sh; title: ; notranslate">/* add display:inline to floated elements */
#test {display:inline;}</pre>
<p>を吐き出してた。<br />
むむむ？</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2010/12/ie6-css-fixer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2010/12/ie6-css-fixer/" />
	</item>
		<item>
		<title>dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;</title>
		<link>http://blog.sakurachiro.com/2010/11/dt-dd-float-ie6/</link>
		<comments>http://blog.sakurachiro.com/2010/11/dt-dd-float-ie6/#comments</comments>
		<pubDate>Tue, 16 Nov 2010 12:07:20 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[html/css]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[IE6]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=2268</guid>
		<description><![CDATA[タイトルが全てだけど dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;を付けるとズレなくなりました。 zoomの前の_はIE6用のハック /にするとIE7以下に効く。]]></description>
			<content:encoded><![CDATA[<p>タイトルが全てだけど</p>
<p>dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;を付けるとズレなくなりました。</p>
<pre class="brush: xml; class-name: html-sh; title: ; notranslate">&lt;dl&gt;
&lt;dt&gt;乱雑&lt;/dt&gt;
&lt;dd&gt;モックアップ&lt;/dd&gt;
&lt;/dl&gt;
</pre>
<pre class="brush: css; class-name: css-sh; title: ; notranslate">dt {
 width:3em;
 float:left;
}
dd {
 margin-left:3em;
 _zoom:1;
}</pre>
<p>zoomの前の_はIE6用のハック<br />
/にするとIE7以下に効く。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2010/11/dt-dd-float-ie6/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2010/11/dt-dd-float-ie6/" />
	</item>
		<item>
		<title>ネガティブマージンでハミ出した要素がIE6で切れたら。</title>
		<link>http://blog.sakurachiro.com/2010/09/negative-margin-ie6/</link>
		<comments>http://blog.sakurachiro.com/2010/09/negative-margin-ie6/#comments</comments>
		<pubDate>Fri, 03 Sep 2010 20:45:29 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[html/css]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[IE6]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=2094</guid>
		<description><![CDATA[とりあえず position:relative; を一緒に指定してみるのが良いみたい。 IE6での表示 真ん中が見切れている状態で、一番下がposition:relative;を追加して問題を回避した表示。 しかし201 [...]]]></description>
			<content:encoded><![CDATA[<p>とりあえず</p>
<pre><code>position:relative;</code></pre>
<p>を一緒に指定してみるのが良いみたい。</p>
<p><span class="note1">IE6での表示</span><br />
真ん中が見切れている状態で、一番下が<code>position:relative;</code>を追加して問題を回避した表示。<br />
<a href="http://blog.sakurachiro.com/wp-content/uploads/2010/09/20100904-2.png" rel="shadowbox[sbpost-2094];player=img;" title="IE6の表示"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/09/20100904-2-480x363.png" alt="IE6の表示、ネガティブマージンを指定した要素が見切れてる。" title="IE6の表示" width="480" height="363" class="alignnone size-large wp-image-2096" /></a></p>
<p>しかし2010年の今になって初めて出会うなんてなぁ。</p>
<p><span id="more-2094"></span></p>
<p>ちなみにIE6以外だと同じソースでこんな感じ。</p>
<p><a href="http://blog.sakurachiro.com/wp-content/uploads/2010/09/20100904-1.png" rel="shadowbox[sbpost-2094];player=img;" title="IE8の表示"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/09/20100904-1-480x363.png" alt="IE8での表示、ネガティブマージンの部分も見切れてない" title="IE8の表示" width="480" height="363" class="alignnone size-large wp-image-2095" /></a></p>
<p>なんで今までこの現象が起きなかったんだろう？と首をかしげつつ<br />
再現出来る最小限のソースを作ろうと問題部分を抜粋していじるけどなかなか再現させられない。。。<br />
結局、ネガティブマージンがある要素とその親要素両方にwidthを指定したらハミ出した部分が消えた。<br />
最小限のソースにしなくちゃと思う気持ちがもつ脆弱性をついた攻撃！！</p>
<pre class="brush: xml; class-name: html-sh; title: ; notranslate">
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;ja&quot; lang=&quot;ja&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;乱雑モックアップ｜ネガティブマージンを指定した要素がIE6消えたら一緒にposition:relativeを指定してみようテスト。&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot; /&gt;

&lt;style type=&quot;text/css&quot;&gt;
/* レイアウト */
*{
padding:0;
margin:0;
}
#contents {
  padding:30px;
  margin:30px;
  width:480px;
  background:#d7d7d7;
}
.topics {
  width:480px;
  background:#f3f3f3;
}
dl {
  padding-bottom:1em;
}
dt {
  width:460px;
  background:#09C;
  color:#fff;
  padding:5px 10px;
}
dd {
  margin-top:5px;
}
ul {
  padding-left:1.5em;
}
li {
  list-style:disc;
}

/* 問題のネガティブマージン */
.negative_margin dt {
  margin-left:-15px;
}
/* 回避策らしいrelative */
.fix dt {
  position:relative;
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;contents&quot;&gt;
  &lt;div class=&quot;topics&quot;&gt;
    &lt;dl&gt;
      &lt;dt&gt;お知らせですよー / ネガティブマージンなし&lt;/dt&gt;
      &lt;dd&gt;
        &lt;ul&gt;
          &lt;li&gt;2010年 - お知らせはありませんよー&lt;/li&gt;
          &lt;li&gt;2009年 - お知らせはありませんよー&lt;/li&gt;
          &lt;li&gt;2008年 - お知らせはありませんよー&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/dd&gt;
    &lt;/dl&gt;
    &lt;dl class=&quot;negative_margin&quot;&gt;
      &lt;dt&gt;お知らせですよー / ネガティブマージンあり&lt;/dt&gt;
      &lt;dd&gt;
        &lt;ul&gt;
          &lt;li&gt;2010年 - お知らせはありませんよー&lt;/li&gt;
          &lt;li&gt;2009年 - お知らせはありませんよー&lt;/li&gt;
          &lt;li&gt;2008年 - お知らせはありませんよー&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/dd&gt;
    &lt;/dl&gt;
    &lt;dl class=&quot;negative_margin fix&quot;&gt;
      &lt;dt&gt;お知らせですよー / ネガティブマージン position:relative;あり&lt;/dt&gt;
      &lt;dd&gt;
        &lt;ul&gt;
          &lt;li&gt;2010年 - お知らせはありませんよー&lt;/li&gt;
          &lt;li&gt;2009年 - お知らせはありませんよー&lt;/li&gt;
          &lt;li&gt;2008年 - お知らせはありませんよー&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/dd&gt;
    &lt;/dl&gt;
  &lt;/div&gt;
  &lt;!-- / #contents --&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>試してる間にposition:relative;使っても見切れるのを回避できないネガティブマージンにも出会ったけど、そうなったらおとなしく親要素のpaddingやmarginでレイアウトした方がいいと思った。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2010/09/negative-margin-ie6/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2010/09/negative-margin-ie6/" />
	</item>
		<item>
		<title>ショートカットをドラッグ&amp;ドロップするだけで、大きいサイズのアイコン画像も一括抽出できる IcoFX</title>
		<link>http://blog.sakurachiro.com/2010/07/icofx/</link>
		<comments>http://blog.sakurachiro.com/2010/07/icofx/#comments</comments>
		<pubDate>Sun, 04 Jul 2010 21:47:30 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[ie]]></category>
		<category><![CDATA[windows]]></category>
		<category><![CDATA[アイコン]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=1960</guid>
		<description><![CDATA[無料でこれは良かった。 IcoFX &#8211; The Free Icon Editor なにが良いかって 本体のexeをドラッグ&#38;ドロップしなくても、アプリのショートカットからでもちゃんとアイコン画像を取り [...]]]></description>
			<content:encoded><![CDATA[<p>無料でこれは良かった。</p>
<div class="alignleft">
<a href="http://icofx.ro/">IcoFX &#8211; The Free Icon Editor</a></p>
<p><a href="http://blog.sakurachiro.com/wp-content/uploads/2010/07/20100705-1.png" rel="shadowbox[sbpost-1960];player=img;" title="IcoFXのサイト"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/07/20100705-1-190x235.png" alt="[image]IcoFXのサイト" title="IcoFXのサイト" width="190" height="235" class="size-medium wp-image-1961" /></a>
</div>
<h3>なにが良いかって</h3>
<p>本体のexeをドラッグ&amp;ドロップしなくても、アプリのショートカットからでもちゃんとアイコン画像を取り出せて楽チン。<br />
あと256 × 256 px の大きなサイズのアイコンにも対応してる。<br />
[options] &#8211; [languages] &#8211; [Japanese] からメニューを日本語に出来る。</p>
<p><a href="http://blog.sakurachiro.com/wp-content/uploads/2010/07/20100705-2.png" rel="shadowbox[sbpost-1960];player=img;" title="IcoFXにショートカットをぶち込んだところ"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/07/20100705-2-480x385.png" alt="[image]IcoFXにショートカットをぶち込んだところ" title="IcoFXにショートカットをぶち込んだところ" width="480" height="385" class="alignnone size-large wp-image-1962" /></a></p>
<p><span id="more-1960"></span></p>
<p><a href="http://blog.sakurachiro.com/wp-content/uploads/2010/07/20100705-3.png" rel="shadowbox[sbpost-1960];player=img;" title="開いたところ、operaは256pxサイズも用意してあるのね"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/07/20100705-3-480x385.png" alt="[image]開いたところ" title="開いたところ、operaは256pxサイズも用意してあるのね" width="480" height="385" class="alignnone size-large wp-image-1963" /></a></p>
<h3>アイコン画像の保存</h3>
<p><span class="key">Ctrl+E</span> ([File] &#8211; [Export Image…])で画像を保存出来る。<br />
save ( Ctrl +S )だと .ico / .icns の保存。<br />
<a href="http://blog.sakurachiro.com/wp-content/uploads/2010/07/20100705-6.png" rel="shadowbox[sbpost-1960];player=img;" title="pngで保存するには [File] - [Export Image…] ( Ctrl+E ) から"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/07/20100705-6-480x385.png" alt="[image]保存" title="pngで保存するには [File] - [Export Image…] ( Ctrl+E ) から" width="480" height="385" class="alignnone size-large wp-image-1967" /></a></p>
<p>欲をいえば、名前が Untitled になってしまうので、勝手にアプリの名前を補完して欲しいかも。</p>
<h4>変更しなくてもだいたいわかるけど言語設定。</h4>
<p><a href="http://blog.sakurachiro.com/wp-content/uploads/2010/07/20100705-7.png" rel="shadowbox[sbpost-1960];player=img;" title="言語設定"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/07/20100705-7-480x385.png" alt="[image]言語設定" title="言語設定" width="480" height="385" class="alignnone size-large wp-image-1968" /></a></p>
<p>本当はアイコンを編集するアプリらしいので影つけたり編集も色々できるぽい。</p>
<p>IE7以下のアイコンが欲しかったから <a href="http://utilu.com/IECollection/">IE Collection</a> ( Internet Explorer 1.0からInternet Explorer 8.0までを一括でインストールできる。IETesterとは別 )をインストールしてアイコンを抽出してみたけど、IE6のアイコンは48pxまでしか入ってなかった、残念。<br />
chromeも 48 × 48pxだったのが驚き。<br />
XPだから?</p>
<h3>おまけ</h3>
<p>ついでにpngで抽出した各ブラウザのアイコンを、zipったので置いておきます。<br />
<a href="http://sakurachiro.com/data/browser-icon.zip">browser-icon.zip / http://sakurachiro.com/data/browser-icon.zip</a><br />
<span class="note2">中身</span></p>
<p><a href="http://blog.sakurachiro.com/wp-content/uploads/2010/07/20100705-81.png" rel="shadowbox[sbpost-1960];player=img;" title="zipの中身"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/07/20100705-81-150x150.png" alt="[image]zipの中身" title="zipの中身" width="150" height="150" class="alignleft size-thumbnail wp-image-1970" /></a></p>
<p>
IE / 1.5, 4, 5.5, 6, 7, 8<br />
firefox, chrome, safari, opera<br />
IETester, jane style</p>
<p class="cl">以上。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2010/07/icofx/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2010/07/icofx/" />
	</item>
		<item>
		<title>IE8のツールバーが黒くなってしまった(けど治った再起動したらまた黒くなった)。</title>
		<link>http://blog.sakurachiro.com/2010/06/ie8-toolbar-background-color-black/</link>
		<comments>http://blog.sakurachiro.com/2010/06/ie8-toolbar-background-color-black/#comments</comments>
		<pubDate>Sun, 06 Jun 2010 09:04:42 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[ie]]></category>
		<category><![CDATA[トラブル]]></category>
		<category><![CDATA[拡張機能]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=1814</guid>
		<description><![CDATA[表示確認するのにIE8立ち上げたらなんか違和感。 よく聞く「何もしてないのにおかしくなったんです」またまたご冗談をが自分の身にも起こるなんて。 普段使わないからこのままでもいいんだけど 画面のプロパティからデザインをXP [...]]]></description>
			<content:encoded><![CDATA[<p>表示確認するのにIE8立ち上げたらなんか違和感。<br />
<a href="http://blog.sakurachiro.com/wp-content/uploads/2010/06/20100606-6.png" rel="shadowbox[sbpost-1814];player=img;" title="IE8ツールバーの背景が黒になった"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/06/20100606-6-e1275814370222.png" alt="[image]IE8ツールバーの背景が黒になった" title="IE8ツールバーの背景が黒になった" width="479" height="160" class="alignnone size-large wp-image-1816" /></a></p>
<p><span id="more-1814"></span></p>
<p>よく聞く「何もしてないのにおかしくなったんです」またまたご冗談をが自分の身にも起こるなんて。<br />
普段使わないからこのままでもいいんだけど<br />
画面のプロパティからデザインをXPスタイルに変更したら治った。</p>
<p>変更は<em> &#8220;画面のプロパティ &#8211; デザインタブ &#8211; ウィンドウとボタン&#8221;</em> から<br />
<a href="http://blog.sakurachiro.com/wp-content/uploads/2010/06/20100606-5.png" rel="shadowbox[sbpost-1814];player=img;" title="画面のプロパティ - デザインタブ - ウィンドウとボタン"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/06/20100606-5.png" alt="[image]画面のプロパティ - デザインタブ - ウィンドウとボタン" title="画面のプロパティ - デザインタブ - ウィンドウとボタン" width="469" height="416" class="alignnone size-full wp-image-1815" /></a></p>
<p>XPスタイルにしたら解決、でもなにこれ色がすごく眩しい。<br />
<a href="http://blog.sakurachiro.com/wp-content/uploads/2010/06/20100606-7.png" rel="shadowbox[sbpost-1814];player=img;" title="XPスタイル、色がまぶしい。"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/06/20100606-7-e1275814840493.png" alt="[image]デザインをXPスタイルに変更したIE8" title="XPスタイル、色がまぶしい。" width="479" height="149" class="alignnone size-large wp-image-1817" /></a></p>
<p>クラシックに戻しても問題なし。<br />
<a href="http://blog.sakurachiro.com/wp-content/uploads/2010/06/20100606-8.png" rel="shadowbox[sbpost-1814];player=img;" title="再度クラシック表示に"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/06/20100606-8-e1275814898766.png" alt="[image]デザインをクラシックに変更" title="再度クラシック表示に" width="479" height="149" class="alignnone size-large wp-image-1818" /></a><br />
なんか文字詰めが変わったような?</p>
<p>IE8なのにIE7Proを入れたのが原因なのかな<br />
<a href="http://www.ie7pro.com/?language=jp">IE7Pro &#8211; 究極のアドオン用Internet Explorer</a><br />
マウスジェスチャーやアドレスバーからタグを開けるようになる拡張機能。</p>
<p><em class="note2">[追記]</em><br />
再起動したらまた黒くなった、あるぇ?</p>
<p><em class="note2">[追記の追記]</em><br />
Windows Update (MS Update) したら治った。<br />
本当に治ってるのか…?</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2010/06/ie8-toolbar-background-color-black/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2010/06/ie8-toolbar-background-color-black/" />
	</item>
		<item>
		<title>Internet Explorerのテキストフィールド(input type=&#8221;text&#8221;)のテキスト縦位置をイイ感じにしたい。</title>
		<link>http://blog.sakurachiro.com/2010/05/internetexplorer-textfield/</link>
		<comments>http://blog.sakurachiro.com/2010/05/internetexplorer-textfield/#comments</comments>
		<pubDate>Tue, 25 May 2010 17:22:40 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[html/css]]></category>
		<category><![CDATA[ie]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=1775</guid>
		<description><![CDATA[テキストフィールド ( input ) に padding ではなく height を指定したい時があるんですけど そうするとIEで文字が上揃えになっちゃってるみたいなんですよね。 IE 8 の表示(6～8同じ感じだった [...]]]></description>
			<content:encoded><![CDATA[<p>テキストフィールド ( input ) に padding ではなく height を指定したい時があるんですけど<br />
そうするとIEで文字が上揃えになっちゃってるみたいなんですよね。</p>
<p>IE 8 の表示(6～8同じ感じだった)<br />
<img src="http://blog.sakurachiro.com/wp-content/uploads/2010/05/20100526-2.png" alt="IEのinput内テキスト縦位置" title="IEのinput内テキスト縦位置" width="205" height="80" class="alignnone size-full wp-image-1774" /></p>
<p>Firefoxは最初っからイイ感じ。<br />
<img src="http://blog.sakurachiro.com/wp-content/uploads/2010/05/20100526-1.png" alt="firefoxのinput内テキスト縦位置" title="firefoxのinput内テキスト縦位置" width="205" height="80" class="alignnone size-full wp-image-1773" /></p>
<p><span class="note2">html</span></p>
<pre class="brush: xml; title: ; notranslate">
&lt;input type=&quot;text&quot; name=&quot;example&quot; /&gt;
</pre>
<p><span class="note3">css</span></p>
<pre class="brush: css; title: ; notranslate">
input[type=&quot;text&quot;]{
height:1.6em;
}
</pre>
<p>細かい事で申し訳ないけど気持ち悪い、なんとかしたい。</p>
<h3>IEでも縦位置中央にするには</h3>
<p>試してみた結果、heightと同じ値をline-heightに指定する方法が有効ぽかった。</p>
<p><span id="more-1775"></span></p>
<pre class="brush: css; title: ; notranslate">
input[type=&quot;text&quot;]{
height:1.6em;
line-height:1.6em;
}
</pre>
<p>すると、IEの表示がこうなる。<br />
<img src="http://blog.sakurachiro.com/wp-content/uploads/2010/05/20100526-3.png" alt="IEのinput内テキスト縦位置:line-height追加" title="IEのinput内テキスト縦位置:line-height追加" width="318" height="80" class="alignnone size-full wp-image-1772" /></p>
<h3>確認用テキストフィールド</h3>
<dl>
<dt>heightのみ指定</dt>
<dd>
<input type="text" name="example1" style="height:50px;width:476px;" value="height:50px;" /></dd>
<dt>line-heightを追加</dt>
<dd>
<input type="text" name="example2" style="height:50px;line-height:50px;width:476px;" value="height:50px;line-height:50px;" /></dd>
<dt>paddingの場合</dt>
<dd>
<input type="text" name="example2" style="padding-top:15px;padding-bottom:15px;width:476px;" value="padding:15px 2px;" /></dd>
</dl>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2010/05/internetexplorer-textfield/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2010/05/internetexplorer-textfield/" />
	</item>
		<item>
		<title>ie-css3.js ( :nth-childなどのCSS3擬似クラスをIEでも使えるようにするjs ) で失敗した事。</title>
		<link>http://blog.sakurachiro.com/2010/04/ie-css3-js/</link>
		<comments>http://blog.sakurachiro.com/2010/04/ie-css3-js/#comments</comments>
		<pubDate>Wed, 28 Apr 2010 00:46:03 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[CSS3]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=1629</guid>
		<description><![CDATA[動作テストだからといってhtmlのhead内にcss書いて、ローカルで表示確認していたらエラーしか出なくて途方に暮れた… その原因は2つありました。 ローカルだと機能しない cssは外部化しておく 以下、使い方メモなど。 [...]]]></description>
			<content:encoded><![CDATA[<p>動作テストだからといってhtmlのhead内にcss書いて、ローカルで表示確認していたらエラーしか出なくて途方に暮れた…</p>
<h3>その原因は2つありました。</h3>
<ol>
<li>ローカルだと機能しない</li>
<li>cssは外部化しておく</li>
</ol>
<p>以下、使い方メモなど。</p>
<p><span id="more-1629"></span></p>
<p><span class="note2">ヘッダ部分の例</span></p>
<pre class="brush: xml; title: ; notranslate">&lt;!--[if lte IE 8]&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/DOMAssistantCompressed-2.8.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/ie-css3.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;</pre>
<p><span class="note2">ie-css3.jsダウンロード先</span><br />
<del datetime="2010-09-23T09:25:57+00:00"><a href="http://www.keithclark.co.uk/labs/ie-css3/">Keith Clark &#8211; IE CSS3 pseudo-class selectors</a></del></p>
<p>IE8以下にcss3の擬似クラスを対応させるjsのバージョンが1.0になって名前と配布サイトが変わってた。<br />
<a href="http://selectivizr.com/">Selectivizr &#8211; CSS3 pseudo-class and attribute selectors for IE 6-8</a></p>
<p>ie-css3.js以外にjavascript libraryが必要、色々対応してるので好きなのを選んで使う。<br />
<a href="http://www.domassistant.com/">DOMAssistant 2.8.0</a>と併用すれば以下の擬似クラス全てに対応するようだ。</p>
<p><span class="note2">v0.9.5bで対応している擬似クラス</span><br />
<a href="http://www.keithclark.co.uk/labs/ie-css3/#supported-libaries">Supported JavaScript Libraries</a></p>
<ol style="-moz-column-count:2;-moz-column-gap:10px;-webkit-column-count:2;-webkit-column-gap:10px;">
<li>:nth-child</li>
<li>:nth-last-child</li>
<li>:nth-of-type</li>
<li>:nth-last-of-type</li>
<li>:first-child</li>
<li>:last-child</li>
<li>:only-child</li>
<li>:first-of-type</li>
<li>:last-of-type</li>
<li>:only-of-type</li>
<li>:empty</li>
<li>:enabled</li>
<li>:disabled</li>
<li>:checked</li>
<li>:hover</li>
<li>:focus</li>
<li>:target</li>
<li>::first-line</li>
<li>::first-letter</li>
</ol>
<p><a href="http://zng.info/specs/css3-selectors.html#structural-pseudos">選択子 / 6.6.5 構造上の擬似クラス</a>(日本語訳)</p>
<p><a href="http://sakurachiro.com/_exercise/html_css/css3-nth/">ie-css3.js動作確認サンプル</a><br />
確かにIEでも擬似クラスが有効になってるけど、&lt;pre&gt;のcssが無効になってる。使い方間違ってるのかな…<br />
でもどうやら@importから先のcssファイルを読み込んでくれてないみたいだ。</p>
<h3>書いてあった＞＜；；</h3>
<blockquote><p>A few things you should know:</p>
<p>    * Style sheets MUST be added to the page using a
<link> tag. You can still use @import in your style sheets. Page level style sheets won&#8217;t be parsed<br />
    * Style sheets MUST be hosted on the domain as the page.</link></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2010/04/ie-css3-js/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2010/04/ie-css3-js/" />
	</item>
		<item>
		<title>IETesterがv0.4.3になってIE9 previewに対応してたよ。</title>
		<link>http://blog.sakurachiro.com/2010/04/ietester-ie9-preview/</link>
		<comments>http://blog.sakurachiro.com/2010/04/ietester-ie9-preview/#comments</comments>
		<pubDate>Mon, 26 Apr 2010 16:49:06 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[ie]]></category>
		<category><![CDATA[ツール/アプリケーション]]></category>
		<category><![CDATA[IE9]]></category>
		<category><![CDATA[IETester]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=1625</guid>
		<description><![CDATA[* 現在はv0.4.10 続きがあります / IETester v0.4.8 で IE9正式版をプレビュー出来るようにするメモ 正式版IE9をインストールしてから IETesterでプレビューさせる為に 移動させる必要が [...]]]></description>
			<content:encoded><![CDATA[<p><span class="note2">* 現在はv0.4.10</span><br />
続きがあります / <a href="http://blog.sakurachiro.com/2011/04/ietester-ie9/">IETester v0.4.8 で IE9正式版をプレビュー出来るようにするメモ</a><br />
正式版IE9をインストールしてから<br />
IETesterでプレビューさせる為に<br />
移動させる必要があるフォルダと、変更する名前について書いてあるよ。</p>
<h3>以前より動作が安定してアイコンも綺麗になってた。</h3>
<p><a href="http://blog.sakurachiro.com/wp-content/uploads/2010/04/20100427-1.jpg" rel="shadowbox[sbpost-1625];player=img;" title="IE Tester 0.4.3"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/04/20100427-1.jpg" alt="IE Tester 0.4.3" title="IE Tester 0.4.3" width="480" height="249" class="alignnone size-large wp-image-1626" /></a></p>
<p><a href="http://www.my-debugbar.com/wiki/IETester/HomePage">My DebugBar | IETester / Browser Compatibility Check for Internet Explorer Versions from 5.5 to 9</a></p>
<blockquote><p>Note for IE9  : IETester installer does not include IE9 files, so you will need to install IE9 preview and copy files manually : See <a href="http://www.my-debugbar.com/wiki/IETester/IE9Preview">How To install IE9 under IETester</a> (No more than 1 minute).</p></blockquote>
<p>IE9は含まれてないから必要なら別途preview版をダウンロードしてきてね、と書いてある。</p>
<p><a href="http://samples.msdn.microsoft.com/ietestcenter/">IE9 previewのダウンロードはたぶんここから｜Internet Explorer 9: Testing Center</a><br />
(右上のinstall the previewのボタン)</p>
<h4>同ページ内で、IE9のWeb標準対応度なんてのが他ブラウザと比較されてたり。</h4>
<p><a href="http://blog.sakurachiro.com/wp-content/uploads/2010/04/20100427-2.png" rel="shadowbox[sbpost-1625];player=img;" title="対応状況"><img src="http://blog.sakurachiro.com/wp-content/uploads/2010/04/20100427-2-480x90.png" alt="対応状況" title="対応状況" width="480" height="90" class="alignnone size-large wp-image-1628" /></a></p>
<p>IEは大嫌いだけど、IE9はみんながさっさと乗り換えたくなるような素晴らしいブラウザになればいいなと期待。<br />
IEがちゃんとしてれば制作が幾分楽になるもんね。</p>
<blockquote cite="http://ie.microsoft.com/testdrive/"><p>Internet Explorer Platform Preview requires Windows Vista or Windows 7. Feel free to explore our Test Drive demos in your current browser.</p></blockquote>
<p>ただ、<span class="note2">IE9を使うにはWindowsVistaか7が必要。</span>という事で、XPでIE6使ってる人達はIE9がすげぇ良いブラウザだとしても使えないわけで、どうなんだろう?</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2010/04/ietester-ie9-preview/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2010/04/ietester-ie9-preview/" />
	</item>
		<item>
		<title>jsを使わないcssだけのロールオーバーでポップアップ表示をする時、IE6.7に対応させる為に気を付ける事は</title>
		<link>http://blog.sakurachiro.com/2010/01/only-css-popup-ie67/</link>
		<comments>http://blog.sakurachiro.com/2010/01/only-css-popup-ie67/#comments</comments>
		<pubDate>Tue, 26 Jan 2010 17:04:20 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[html/css]]></category>
		<category><![CDATA[ie]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=1553</guid>
		<description><![CDATA[当初、やる必要は特にないけど、簡単に出来るだろうなと試してみたら IE(tester)の7と6で全く思い通りにいかなかった (IE6はdisplay:inline-block;、IE7はdisplay:inlineじゃな [...]]]></description>
			<content:encoded><![CDATA[<p>当初、やる必要は特にないけど、簡単に出来るだろうなと試してみたら<br />
IE(tester)の7と6で全く思い通りにいかなかった<br />
(IE6はdisplay:inline-block;、IE7はdisplay:inlineじゃなければポップアップが反応しなかったのでハックを使ったり<br />
cssの指定も、ポップアップさせる要素の親ブロックからカスケード指定してこなければ反応しなかったり)<br />
ので、挙動の違いをメモしておこうと、これを書いてたけど</p>
<p>何種類かサンプルを作って何度か書き直してるうちに、<br />
IE6もdisplay:inlineでOKだったり、親要素から指定しなくても問題なかったり混乱する結果ばかり<br />
そして最終的には全然シンプルに出来た。</p>
<p>なのでメモの必要もない感じになってしまったけどせっかくなので<br />
以下、サンプルと気を付けた事、気づいた点のメモ。</p>
<p><span id="more-1553"></span></p>
<h2>サンプル</h2>
<p>IE8やFirefox3、chromeでやるにはとてもシンプル。<br />
test1:<a href="http://sakurachiro.com/_exercise/html_css/css-popup/ie8.html">IE7以下を対象から外したサンプル</a></p>
<p>test2:<a href="http://sakurachiro.com/_exercise/html_css/css-popup/ie7-less.html">IE7以下も対応</a></p>
<h2>気を付けた事、気づいた点</h2>
<p>ポップアップさせる要素に<span class="note2">.popup</span>というclassを付与した場合</p>
<pre class="brush: css; title: ; notranslate">a:hover,
a:hover .popup
</pre>
<p>みたいにa:hoverも指定が必要だった。</p>
<p>:hoverのdisplayの代わりにbackgroundに何か指定してもOKだった。</p>
<p>haslayoutが関係してるのかなとzoom:1を使ってみたところ<br />
IE7でポップアップが消えなかったり希望した動きにならなかった。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2010/01/only-css-popup-ie67/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2010/01/only-css-popup-ie67/" />
	</item>
		<item>
		<title>コンディショナルコメント、IE用に指定するアレ</title>
		<link>http://blog.sakurachiro.com/2009/07/285/</link>
		<comments>http://blog.sakurachiro.com/2009/07/285/#comments</comments>
		<pubDate>Thu, 30 Jul 2009 09:33:02 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[html/css]]></category>
		<category><![CDATA[ie]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=285</guid>
		<description><![CDATA[IE大嫌い けれど、どんなにみんなに叩かれても「そんなに文句いうならお前が作ってみろよ！」と言い出したりしないところは評価してる。 まぁだからってIE大嫌いに変わりはない。 さて、コンディショナルコメントというものがあり [...]]]></description>
			<content:encoded><![CDATA[<p>IE大嫌い<br />
けれど、どんなにみんなに叩かれても「そんなに文句いうならお前が作ってみろよ！」と言い出したりしないところは評価してる。<br />
まぁだからってIE大嫌いに変わりはない。</p>
<p>さて、コンディショナルコメントというものがあります。<br />
このブログにも使ってみました。<br />
IEにだけ読み込ませたり、読み込ませなかったり、IEのバージョン毎に読み込むものを変えたりできるアレです。<br />
[20090916修正]<br />
<span id="more-285"></span><br />
書き方</p>
<dl>
<dt>expressionの条件と一致するIEだけに適用する</dt>
<dd>
<pre class="brush: xml; title: ; notranslate">&lt;!--[if expression]&gt; ～ &lt;![endif]--&gt;</pre>
</dd>
<dt>expressionの条件と一致しないIEだけに適用する</dt>
<dd>
<pre class="brush: xml; title: ; notranslate">&lt;!--[if !expression]&gt; ～ &lt;![endif]--&gt;</pre>
</dd>
</dl>
<p>IE全て</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!--[if IE]&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;ie_all.css&quot; /&gt;
&lt;![endif]--&gt;
</pre>
<p>IE7のみ</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!--[if IE 7]&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;ie_7.css&quot; /&gt;
&lt;![endif]--&gt;
</pre>
<p>IE6以下</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!--[if lte IE 6]&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;under_6.css&quot; /&gt;
&lt;![endif]--&gt;
</pre>
<p>IE以外</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!--[if !IE]&gt;--&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;normal.css&quot; /&gt;
&lt;!--&lt;![endif]--&gt;
</pre>
<p>IE全部拒否</p>
<pre class="brush: xml; title: ; notranslate">
&lt;![if !IE]&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;not_ie.css&quot; /&gt;
&lt;![endif]&gt;
</pre>
<p>IE以外とIE全部拒否は同じようだ</p>
<p>comparisonとversionは省略することが可能<br />
comparison feature version</p>
<ul>
<li>feature: ブラウザの種類を指定</li>
<li>version: ブラウザのバージョンを指定</li>
<li>
comparison: バージョンとの比較により適用対象の範囲を指定</li>
</ul>
<dl>
<dt>lt</dt>
<dd>versionより下のIEに適用する。versionで指定したIEには適用しない</dd>
<dt>lte</dt>
<dd>version以下のIEに適用する。versionで指定したIEも適用対象に含む</dd>
<dt>gt</dt>
<dd>versionより上のIEに適用する。versionで指定したIEには適用しない</dd>
<dt>gte</dt>
<dd>version以上のIEに適用する。versionで指定したIEも適用対象に含む</dd>
</dl>
<dl>
<dt>参考url</dt>
<dd>
<ul>
<li><a href="http://journal.mycom.co.jp/special/2007/ie7/017.html">正式版完全対応! Internet Explorer 7 CSS攻略法</a></li>
</ul>
</dd>
</dl>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2009/07/285/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2009/07/285/" />
	</item>
		<item>
		<title>マイクロソフトサポートオンライン</title>
		<link>http://blog.sakurachiro.com/2009/07/%e3%81%a6%ef%bd%93%ef%bd%94/</link>
		<comments>http://blog.sakurachiro.com/2009/07/%e3%81%a6%ef%bd%93%ef%bd%94/#comments</comments>
		<pubDate>Fri, 17 Jul 2009 01:05:13 +0000</pubDate>
		<dc:creator>まこと</dc:creator>
				<category><![CDATA[ie]]></category>
		<category><![CDATA[windows]]></category>
		<category><![CDATA[とりあえずメモ]]></category>

		<guid isPermaLink="false">http://blog.sakurachiro.com/?p=207</guid>
		<description><![CDATA[http://support.microsoft.com/gp/lifesupsps#Internet_Explorer Internet Explorer 6 on Windows XP Home Edition Se [...]]]></description>
			<content:encoded><![CDATA[<p>http://support.microsoft.com/gp/lifesupsps#Internet_Explorer</p>
<p>Internet Explorer 6 on Windows XP Home Edition Service Pack 2は2010/07/13でサポート終了</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.sakurachiro.com/2009/07/%e3%81%a6%ef%bd%93%ef%bd%94/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.sakurachiro.com/2009/07/%e3%81%a6%ef%bd%93%ef%bd%94/" />
	</item>
	</channel>
</rss>

