見え方の違い

kobuta

Webサイトを公開する場合，閲覧するデバイスやブラウザを考慮します。
先日の変更でも特にCSSの編集では配慮しました（のはず…）。

このサイトのドロップダウンメニューでも違いがみられます。

メニューの比較

ブラウザによる見え方の違いメニュー部分のCSS
IEの場合
ページの見え方（Internet Explorer）		 Firefoxの場合
ページの見え方（Firefox）
Chromeの場合
ページの見え方（Chrome）		 Edgeの場合
ページの見え方（Edge）		 

.feature-slider a {
	background: #3c3c3c;
	background: rgba(60,60,60,0.9);
	-moz-border-radius: 12px;
	border-radius: 12px;
	-webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
	-moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
	box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
	display: block;
	width: 14px;
	height: 14px;
}

IEはグラデーションを反映しません。
だから影もOffice2007の図形につけた影のようになります。
しかしこの点は新しいEdgeでは反映されているのがわかります。

こういった見え方のチェックには各ブラウザの用意が必要となりますが
こちらのようなサイトを利用することでチェックできるので
セットアップの必要がいらないので便利です。
browserling
browserling
各ブラウザのバージョンや，Windows環境も選択できるようです。

[amjsc] \[amazonjs asin=4883379647\] [/amjsc]