2014年10月30日 web関連HTML5・CSS3

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>

CAPTCHA


ピックアップ記事

Google Web Designer って・・・

2013年10月08日 web関連HTML5・CSS3
Google Web Designer って・・・
Google Web Designerってツールのβ版が公開されたようなので、触ってみました。Web Designerって名前が現在の私のイメージとは合わないのですが、Google的には、このツールでサイト一式作れるぜってことなのでしょうか(・・;) Google Web Designerとは 以下、Googleによる、このツールの説明です。Google Web Designer は、…
「Google Web Designer って・・・」をはてなブックマークに追加

WordPressで記事に画像投稿する際に、自動でクラス名をつける

2013年10月09日 web関連WordPressphp
記事内の画像をいい感じのエフェクトをつけて拡大表示させるWordPressのプラグイン「Easy FancyBox」というのを導入したのですが、挿入されたaタグやimgタグに固有のクラス名がないので、CSSで調整しづらかったので、リンク付きの画像を挿入したい際に自動でclass名を追加するようにしました。 imgタグにclassを追加する場合とaタグに追加する場合を分けて書きます。 挿…
「WordPressで記事に画像投稿する際に、自動でクラス名をつける」をはてなブックマークに追加

レスポンシブ対応 画像メニューをテキスト表示に切り替える

2014年11月15日 web関連HTML5・CSS3
レスポンシブなサイトを作るときに、大きな画面では画像メニュー、スマホなどのサイズでは、テキストメニューにして、メニューボタンに格納したい場合など、画像メニューからテキストメニューにCSSで表示切り替えする方法。 cssの:before attr属性で解決 html [php]<ul id="nav"> <li><a data-tex…
「レスポンシブ対応 画像メニューをテキスト表示に切り替える」をはてなブックマークに追加

WordPressのテーマをウィジェットに対応させる

2013年10月06日 web関連WordPressphp
WordPressのテーマをウィジェットに対応させる
Wordpressで自作のテーマを作った場合などは、自分でウィジェットを利用可能にしない限り、ウィジェットは利用出来ません。このサイトのテーマは自作なのですが、今までウィジェットは使う機会がなかったので、未対応のままになっていました(:_;) 今回は、サイドにWordPress Popular Postsプラグインの人気記事一覧を表示させたかったので、調べてみましたよっ!ってことで、ウィジェ…
「WordPressのテーマをウィジェットに対応させる」をはてなブックマークに追加

twitter API からプロフィール画像を取得・表示

2011年07月28日 web関連twitter API
twitter API からプロフィール画像を取得・表示する方法です。 リクエストURL [php]http://api.twitter.com/1/users/profile_image?screen_name=apr_20&size=bigger[/php] 画像として表示 [php]<img src="http://api.twitter.com/1/users/…
「twitter API からプロフィール画像を取得・表示」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy