CSS3 PIEがIE9でのみ動作しません
IEでlinear-gradientを使用するためにPIE.jsを導入しました。
IE8以下では無事グラデーションが表示されたのですが、IE9でのみグラデーションが反映されません。
色々調べ、position:relative;やz-index:1;等の記述は行っております。
原因がわかる方、お力を貸していただけないでしょうか。
ソースは以下になります。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1");</script>
<!--[if lt IE 9]>
<script src="js/PIE.js"></script>
<script>
$(function() {
if (window.PIE) {
$(’.title’).each(function() {
PIE.attach(this);
});
}
});
</script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section id="maincontents">
<div class="title clearfix">
<h1>タイトルはいります</h1>
<ul id="subnavi">
<li><a href="">項目1</a></li>
<li><a href="">項目2</a></li>
<li><a href="">項目3</a></li>
</ul>
</div>
</section>
</body>
</html>
CSSは初期設定のリセットしているものについては省きますが、関連する所は以下になります。
@charset "utf-8";
.title{
position:relative;
z-index:1;
margin:20px 0 10px 0;
padding:18px 10px 15px 10px;
background-color:#83d128;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #298e0b), color-stop(0.00, #aff236));
background: -webkit-linear-gradient(top, #aff236 0%, #298e0b 88%);
background: -moz-linear-gradient(top, #aff236 0%, #298e0b 88%);
background: -o-linear-gradient(top, #aff236 0%, #298e0b 88%);
background: -ms-linear-gradient(top, #aff236 0%, #298e0b 88%);
background: linear-gradient(to bottom, #aff236 0%, #298e0b 88%);
-pie-background: linear-gradient(top, #aff236 0%, #298e0b 88%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
-pie-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
border-left: solid #063 3px;
}
#maincontents h1{
float:left;
font-size:167%;
letter-spacing:0.2em;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
-pie-text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
color:#fff;
line-height:1;
}
#subnavi{
float:right;
}
#subnavi li{
float:left;
border-left:solid #fff 1px;
padding:0 0.7em;
}
#subnavi li:first-child{
border:none;
}
#subnavi li a{
color:#fff;
text-decoration:none;
}
#subnavi li a:hover{
color:#fff;
text-decoration:underline;
}
みんなの回答 1 件
if lt IE 9だとIE9未満になっちゃうんじゃないですかね。
関連するトピックス