支援訓練 40日目 - ichisemasashi's blog

IE6で表示が崩れる要因
① カラム落ち → display: inline
② 透過PNGが不適応 → DD_belatedPNG.js

[IE]IE Testerと透過PNGの処理

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>透過PNGをIE6に適応させる</title>
<style>
* {
  margin:0;
  padding: 0;
}
body {
  background: url(img/02.gif);
}
p {
  text-align: center;
  margin-top: 50px;
}
#wrapper {
  width:800px;
  overflow: hidden;
}
#content {
  width: 500px;
  height: 200px;
  background: #CF0;
  margin-left: 50px;
  float:left;
  display: inline;
}
#sidebar {
  float:right;
  width: 200px;
  margin-right: 50px;
  height: 200px;
  background:#FCF;
  display: inline;
}
</style>
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<script>
DD_belatedPNG.fix('img, .png_bg');
</script>
<![endif]-->
</head>

<body>
<p><img src="img/clojure.png" width="800" height="600" alt=""></p>
<div id="wrapper">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
</body>
</html>