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>

ピックアップ記事

Twitter API の利用回数制限を確認する

2011年07月29日 twitter APIweb関連
Twitter API (GET送信のみ?) には利用回数上限があります。Twitter APIを利用してサービスを作る際に、試行錯誤していると、いつの間にかAPIの利用回数上限にひっかかってしまいます。利用回数上限にひっかかると,一定時間(およそ1時間らしいです)そのアカウントまたはそのIPアドレスからアクセスできなくなります。 …
「Twitter API の利用回数制限を確認する」をはてなブックマークに追加

IE6で透過pngを表示させる。DD_belatedPNG

2012年02月14日 jQuery・javascriptweb関連
DD_belatedPNG 先日、でも触れましたが、DD_belatedPNGというjavascriptを使って、IE6で透過pngを表示させてみました。 DD_belatedPNGの入手 以下のサイトにいって、DD_belatedPNGをダウンロードします。以下のサイト内を下へスクロールしていくと、左のサイドバーにDD_belatedPNG 0.0.8a releasedというリンクがあり…
「IE6で透過pngを表示させる。DD_belatedPNG」をはてなブックマークに追加

WordPress ウィジェットに個別のid,classを設定する

2014年08月11日 web関連WordPress
WordPressのウィジェットに個別のid,classを設定して、違うデザインを適用したい場合は、functions.php内でサイドウィジェットを有効にする設定項目の「before_widget」の箇所を以下のように変更します。 [php]register_sidebar(array( 'name' => 'side-widget', 'before_wid…
「WordPress ウィジェットに個別のid,classを設定する」をはてなブックマークに追加

レスポンシブ対応 画像メニューをブラウザ幅に合わせて縮小表示

2014年11月15日 HTML5・CSS3web関連
レスポンシブ対応 画像メニューをブラウザ幅に合わせて縮小表示
レスポンシブ対応のサイトを作るときに画像メニューを設置して、ブラウザが縮小されても画像が改行されることなく、1列で固定で、画像の比率を保ったまま縮小表示させる方法です。 cssのdisplay:table-cellで解決 html [php]<ul id="nav"> <li><a href="#"><…
「レスポンシブ対応 画像メニューをブラウザ幅に合わせて縮小表示」をはてなブックマークに追加

TwitterのプロフィールウィジェットのデザインをCSSで調整する

2012年02月07日 twitter APIweb関連
ツイッターのプロフィールウィジェットを入れているサイトで、CSSでデザインしていたら、h3やh4の設定がTwitterのウィジェットにまで反映されて、困ることが時々あります。(私は・・・) 今回はそれを直したかったので、調べて見ました。 Twitterのウィジェット 当サイトでは、Twitterが提供しているコードをそのまま設置していますが、以下のようなコードです。 [php] <s…
「TwitterのプロフィールウィジェットのデザインをCSSで調整する」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy