ie8に対する見解

オフィシャルがスクロールjsできなかった。ie8対応と書いてあるから
ワードプレス関連の相性か?不明

対応策
ie8以下のみに読み込ますもの
それ以外に読み込ます物をわける

ie8以下のみに読み込ますもの

<!--[if lt IE 9]> 
<script src="/js/html5shiv-printshiv.min.js"></script>
<script type="text/javascript" src="/js/selectivizr.js"></script>
<script>
//スムーズスクロール
jQuery(function(){
   // #で始まるアンカーをクリックした場合に処理
   jQuery('a[href^=#]').click(function() {
	  // スクロールの速度
	  var speed = 400; // ミリ秒
	  // アンカーの値取得
	  var href= jQuery(this).attr("href");
	  // 移動先を取得
	  var target = jQuery(href == "#" || href == "" ? 'html' : href);
	  // 移動先を数値で取得
	  var position = target.offset().top;
	  // スムーススクロール
	  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
	  return false;
   });
});
</script>
<style type="text/css">
#go1,#go2,#go3,#go4,#go5,#go6,#go7{
	margin-top: -160px;
	padding-top: 160px;
}
</style>
<![endif]-->

それ以外

<!--[if (gte IE 9)|!(IE)]><!-->
<script type="text/javascript" src="/js/jquery.multirollover.js"></script>

<script>
	$(document).ready(function() {
		$('#head_rogo a').multirollover({
			crossfade	: true,
			suffix		: '_on',
			duration	: 300,

		});
	});
</script>

<script type="text/javascript" src="/js/jquery.page-scroller-309.js"></script>
<!--<![endif]-->

今回は8以下は
スクロールを

<script>
//スムーズスクロール
jQuery(function(){
   // #で始まるアンカーをクリックした場合に処理
   jQuery('a[href^=#]').click(function() {
	  // スクロールの速度
	  var speed = 400; // ミリ秒
	  // アンカーの値取得
	  var href= jQuery(this).attr("href");
	  // 移動先を取得
	  var target = jQuery(href == "#" || href == "" ? 'html' : href);
	  // 移動先を数値で取得
	  var position = target.offset().top;
	  // スムーススクロール
	  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
	  return false;
   });
});
</script>

で対応し
アンカーをあえて空DIVを入れて
パディングとマイナスマージンで対応

こういう調整は空DIVの有用性ってあるねって思ったし!

結局ie8のセレクタは使用できなかった。

<script src="/js/html5shiv-printshiv.min.js"></script>
<script type="text/javascript" src="/js/selectivizr.js"></script>

こいつをいれる

しかし
デザイン的なcssのずれなどは治った。

どうしても何番目かを指定したい場合は
http://tasudesign.com/web-desing/nth-child/
http://www.gravity-works.jp/gravica/web/003862.html
これで対応してみよう。

:nth-of-type cssセレクタ おさらい

:nth-of-typeの使い方

.blog_box_all

section

div

.class titel

a

テキスト

/a
/div
/section
/div

のループだとすれば

2番目タイトルのカラーを変えたい場合

.blog_box_all section:nth-of-type(2) .blog_titel a {

		color: #F90!important;

}

こうすっべ

偶数を変えたい場合

.blog_box_all section:nth-of-type(2n) .blog_titel a {

		color: #F90!important;

}

奇数

.blog_box_all section:nth-of-type(2n+1) .blog_titel a {

		color: #F90!important;

}

(n) ・・・ n番目の要素に適用

(odd) ・・・ 奇数番目の要素に適用
(2n+1) ・・・ 奇数番目の要素に適用

(even) ・・・ 偶数番目の要素に適用
(2n) ・・・ 偶数番目の要素に適用

(3n) ・・・ 3,6,9,12…番目の要素に適用
(3n+1) ・・・ 1からはじめて+3ずつの番の要素,4,7,10…番目の要素に適用