PCサイトの開発の備忘録 IE9はつらいよ編

ここ最近はPCのサイトを作成しています
ずーとモバイルばかりやっていたので
PCの開発は制限がなくていいね・・・・って思っていました

当初の予定では
IE10,11 ,FIREFOX,chromeを検証すればいいという話だったが
お客がIE9を使っているらしく
色々と不具合がでた

■１：cssがきかない

グラデーションと角丸をいっしょにすると
文字が消える！！

以下、CSS

.pinkBtn {
	display:inline-block;
	border: 1px solid #F89CA9;
	margin: 3px;
	padding: 10px 20px;
	width: 140px;
	height: 53px;
	vertical-align: middle;
	text-decoration:none;
	border-radius:10px;
	font-size:1.5em;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFBBD6), to(#D50F6D));
	background: -moz-linear-gradient(top, #FFBBD6, #D50F6D);
	background: linear-gradient(to bottom, #FFBBD6, #D50F6D);
	color: #ffffff !important;
	font-weight: bold;
}
.pinkBtn:hover {
	background: -webkit-gradient(linear, left top, left bottom, from(#D50F6D), to(#FFBBD6));
	background: -moz-linear-gradient(top, #D50F6D, #FFBBD6);
	background: linear-gradient(to bottom, #D50F6D, #FFBBD6);
	color: #FFC0CB !important;
}
.pinkBtn:disabled {
	background: #D3D3D3;
	border: 1px solid #A9A9A9;
	color: #ffffff !important;
}

結局、ボタンを全部、画像に変えるというので逃げました

あとでしったのですが
CSSで色々なボタンが作れるみたい・・・

http://lopan.jp/button-layer-style/

いつもCSSはデザイナーさんが用意してくれて
それを使うだけだったが今回は
デザインがイメージしかなく
そこからCSSをおこさなければならなかった
やったことがないことだらけで勉強になった

■２：スワイプのjqueryがきかない

下記のサイトに簡単にスワイプができるサイトがあったので
http://on-ze.com/archives/591
組みました

ヘッダー

<script type="text/javascript" src="js/jquery.swipeshow.min.js"></script>
<link href="cssnew/jquery.swipeshow.css" rel="stylesheet">
<link href="cssnew/slideshow-theme.css" rel="stylesheet">

ソース

<div class="slideshow swipeshow" style="width: 508px;height: 362px;">
		<ul class="slides">
			<li class="slide">
				<img src="image/01.jpg" alt="" width="508" height="362"><br>
			</li>
			<li class="slide">
				<img src="image/02.jpg" alt="" width="508" height="362"><br>
			</li>
			<li class="slide">
				<img src="image/03.jpg" alt="" width="508" height="362"><br>
			</li>
		</ul>
</div>

JS

<script>
	 $(".version").text($.swipeshow.version);
	 $(".slideshow").swipeshow({ mouse: true, interval: 3000 });
</script>

Swipeshow 本体のダウンロード。以下のサイト
http://ricostacruz.com/swipeshow/

IE9だと一枚目が表示されていてスワイプになっていなかった

■今後の対応

　IE9だとJSやCSSが効かないことがあるので
　必ずIEの開発者ツールの旧バージョン表示で確認したいと思う
　http://webdev.jp.net/ie11-document-mode/

　最終的な確認だと
　IEのイメージで確認したほうがいい
　https://www.modern.ie/ja-jp/virtualization-tools

■自分の意見としては

　IE9は死んでくれるとうれしいな～