-->

2011-10-12

IE8のmin-width

http://msdn.microsoft.com/ja-jp/library/cc288325%28v=vs.85%29.aspx#content_%E5%B1%9E%E6%80%A7%E5%80%A4%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

IETester v0.4.11でmin-widthが動くがwindowsXPのIE8では動かないので設定を追加した。
IE6,IE7では別の設定が必要です。
<meta content='IE=100' http-equiv='X-UA-Compatible'/>

例。
<style type="text/css">
<!--
#ie8test-c9d637d9b63df117874a716164fb5f99, #ie8test-c9d637d9b63df117874a716164fb5f99 * {
  font-size: 16px;
}
#ie8test-c9d637d9b63df117874a716164fb5f99 ul {
  list-style-type: none;
  width: 250px;
}
#ie8test-c9d637d9b63df117874a716164fb5f99 ul li {
  float: left;
  min-width: 120px;
}
#ie8test-c9d637d9b63df117874a716164fb5f99 ul li span {
  margin-right: 0.8em;
}
-->
</style>
<div id="ie8test-c9d637d9b63df117874a716164fb5f99">
 <ul>
  <li><a>タイトル</a> <span>(1)</span></li>
  <li><a>タイトル</a> <span>(1)</span></li>
  <li><a>タイトル</a> <span>(1)</span></li>
  <li><a>タイトルタイトル</a> <span>(1)</span></li>
  <li><a>タイトルタイトルタイトル</a> <span>(1)</span></li>
  <li><a>タイト</a> <span>(1)</span></li>
  <li><a>タイ</a> <span>(1)</span></li>
  <li><a>タ</a> <span>(1)</span></li>
 </ul>
</div>
<br clear="all" style="clear: both;" />

追記。例。IE7以下のブラウザで違うcssを適用する場合。
@@ -976,6 +976,20 @@

 ]]></b:skin>

+<!--[if lte IE 7]>
+<style type="text/css">
+#sidebar .Label ul li {
+  display : block;
+  float   : left;
+  width   : 125px;
+}
+#sidebar .Label ul li span {
+  margin-right : 0;
+  white-space  : nowrap;
+}
+</style>
+<![endif]-->
+
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 //<![CDATA[<!--

0 件のコメント: