2014年10月30日 HTML5・CSS3web関連

CSS3が使えるようになって、メニューボタンの背景に矢印を表示させることなどが出来るようになりましたが、IEでは効かないものもあります。
背景に矢印を入れる時は、transform: rotate(45deg);のようにborderを回転させるのですが、このtransformがIE9では使えません。

CSS3で矢印を作る方法は、以下のサイト様が詳しく説明してくださっています。
スマートフォンサイト制作時に覚えておきたいCSS 15

リンクに矢印を表示させるHTML&CSS

HTML

<ul>
	<li><a href="#">List 01</a></li>
	<li><a href="#">List 02</a></li>
	<li><a href="#">List 03</a></li>
	<li><a href="#">List 04</a></li>
	<li><a href="#">List 05</a></li>
</ul>

CSS

ul li a {
	position: relative;
	display: block;
	padding: 10px 25px 10px 10px;
	border-bottom: 1px solid #ccc;
}
ul li a::after {
	position: absolute;
	top: 50%;
	right: 10px;
	display: block;
	content: '';
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-top: 1px solid #888;
	border-right: 1px solid #888;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

上記の例で、IE9では、transformが聞かないので、右上の角に直角にボーダーが表示されてしまいます。 スクリーンショット 2014-10-30 16.48.41

解決策

ベンダープレフィックスをつければ反映される場合があるようです。 ベンダープレフィックスとは、CSSを触ったことある方ならお馴染みの「Chromeなら-webkit、FireFoxなら-moz」のような CSSプロパティの先頭につける接頭辞です。
主要ブラウザのベンダープレフィックス
-moz-   Firefox
-webkit- Google Chrome、Safari
-o- Opera
-ms- Internet Explorer

IE9でtransformを有効にするには、CSSのtransformの箇所に以下を追記します。

-ms-transform: rotate(-7deg);

いつまでたってもIEは気が抜けませんね(^_^;)
ブラウザ間の調整をしなくて良くなる日が来る日を願って・・・ε≡≡ヘ( ´Д`)ノ

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ピックアップ記事

[xserver]サブドメイン設定時の注意点

2014年08月23日 web関連
xserverのマニュアルにもありますが、サブドメインを設定すると、異なるURLで同じサイト(ページ)へアクセス可能になってしまうので、Googleに重複サイトと思われないように以下のように設定した.htaccessを設置します。 …
「[xserver]サブドメイン設定時の注意点」をはてなブックマークに追加

IE6をHTML5に対応させる

2012年02月14日 HTML5・CSS3jQuery・javascript
IEのHTML5対応状況 IE6だけでなく、IE8以下は全てHTML5に対応していません。 それを対応させるために「html5.js」というjavascriptを読み込ませます。 使い方は簡単で以下のコードをタグの前の内に記述します。 [php] <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/…
「IE6をHTML5に対応させる」をはてなブックマークに追加

Facebook OGP対応してアクセスを増やす

2011年06月29日 web関連
OGP対応する http://gadget-or-gimmick.com/archives/2011-06-16/114209.html
「Facebook OGP対応してアクセスを増やす」をはてなブックマークに追加

Twitter for Mac’s developer consoleの設定

2014年07月18日 twitter APIweb関連
Twitter for Mac’s developer consoleの設定
ちょうど設定してみたので、メモ。 まだ触ってないので詳しく分かりませんが、Twitter for Mac's developer consoleというのは、Twitter APIのテストが可能なのようです。 WEB版のコンソールもありますが、Twitter for Mac's developer consoleの方がサクサク動くらしいです。 DEVサイトにログイン、APP登録 まず…
「Twitter for Mac’s developer consoleの設定」をはてなブックマークに追加

WordPressのサムネイルのサイズ指定を削除

2013年11月10日 phpweb関連WordPress
WordPressのテーマ内で、the_post_thumbnailで記事のアイキャッチを表示させる際に、width,heightがimgタグ内で設定されていますが、それを消す方法です。 レスポンシブウェブデザインをする際には、ハードコーディングは外したほうがいいかもしれませんね。 functions.php内に以下を記述 [php]//サムネイルのサイズ指定削除 add_fi…
「WordPressのサムネイルのサイズ指定を削除」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy