レスポンシブサイトのIE8でPC版を表示させる

レスポンシブサイトで対応ブラウザがIE8以上の場合、Respond.jsやcss3-mediaqueries.jsで対応する方法があります。
ただ、そもそもIE8でレスポンシブに対応する必要があまりないと思うので、IE8ではレスポンシブに対応せずにPC版のみ表示する方法を紹介します。

サンプルコード

HTML

<div id="page">
	<header id="header">
		ヘッダー
	</header>
	<div id="contents">
		<div id="main">
			メイン
		</div>
		<div id="sub">
			サブ
		</div>
	</div>
	<footer id="footer">
		フッター
	</footer>
</div>

CSS

#page {
	width: 100%;
	min-width: 960px;/* IE8用 */
}
@media(max-width: 980px) {/* IE8以外ではmin-width解除 */
#page {
	min-width: 0;
}
}/* max-width:980px END */


/* レスポンシブの内容 */
#header {
	width: 100%;
	height: 100px;
	background: #E74C3C;
}
#contents {
	width: 100%;
	max-width: 960px;
	overflow: hidden;
	margin: 0 auto;
}
#main {
	float: left;
	width: 740px;
	height: 1000px;
	background: #3498DB;
}
#sub {
	float: right;
	width: 200px;
	height: 1000px;
	background: #2ECC71;
}
#footer {
	width: 100%;
	height: 100px;
	background: #9B59B6;
}

@media(max-width:980px) {
#main {
	float: none;
	width: auto;
}
#sub {
	float: none;
	width: auto;
	height: 200px;
}
}/* max-width:640px END */

CSSの3行目でmin-width: 960px;を全体に指定、5～9行目のMedia Queries内でmin-widthを初期化しています。
Media Queriesの対応がIE9以上なので、IE8でのみ#pageにmin-width: 960px;を指定され、960px以下にならない(横スクロールバーが出る)ようになります。
IE8でレスポンシブに対応せずにPC版のみ表示するデモページ