IE対策

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

IE9.js --- IE5.5～IE8のCSS不具合調整。

• 擬似クラス対応
• 属性セレクタ対応
• 透過PNG対応
• position:fixed対応
• margin:0 auto;対応
• max-height,width対応
• min-height,width対応
• IE5/6のバグを修正

html5.js --- html5における新要素調整。

@mixin@extendメモ

// 矢印
.arrow{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid #000;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

//clearfix
@mixin clearfix {
    zoom: 1;
    &:before,
    &:after {
        display: block;
        height: 0;
        visibility: hidden;
        content: "\0020";
    }
    &:after {
        clear: both;
    }
}

//グラデーション
@mixin grad($color1, $color2){
    background: $color1;
    background: -moz-linear-gradient(top,  $color1 0%, $color2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color1), color-stop(100%,$color2));
    background: -webkit-linear-gradient(top,  $color1 0%,$color2 100%);
    background: -o-linear-gradient(top,  $color1 0%,$color2 100%);
    background: -ms-linear-gradient(top,  $color1 0%,$color2 100%);
    background: linear-gradient(to bottom,  $color1 0%,$color2 100%);
}

//2013-02-22編集

//以前の記述だとinsetを上手く使えなかったため、条件分岐を追加して対応

//box-shadow
@mixin box-shadow($top, $left, $blur, $red, $green, $blue, $opacity, $inset : false) {
  @if $inset == true {
    -moz-box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity) inset;
    -webkit-box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity) inset;
    box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity) inset;
  } @else {
    -moz-box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
    -webkit-box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
    box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
  }
}

//text-shadow
@mixin text-shadow($top, $left, $blur, $red, $green, $blue, $opacity) {
 -moz-text-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
 -webkit-text-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
 text-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
}

このブログについて

私、コバヤシヒデツグが仕事関係（html,css,javascript,php）で得た知識を雑多に記録していくメモ帳となっています。更新頻度は不定期ですし、独自の技術を公開するためのものでもありませんのでご了承くださいませ。