2013.
07.
10
17:01:33
と言うよりは、CSSの疑似要素「:after」「:before」で設定している内容が
IE7で表示されないけど何とかならんかね？（つд`）・°・。と、
ご相談をいただいたのがきっかけなんですけどね。
結論から言えば、こちらのjQueryプラグインで何とかなりましたφ（－－）
■jQuery Pseudo Plugin
http://jquery.lukelutman.com/plugins/pseudo/
ありがたや～（－人－）
使い方は該当のプラグインを読み込んで、あとはCSSを書くだけ。
CSSの書き方にちょっとだけ癖があるのでご注意ください。
IEで表示する用のCSSは
のように要素内に「before:」「after:」を記述すればOKです。
ただしこれだけだと他のブラウザでは表示されません。
そこで普通のやり方で擬似要素を定義しておく必要もありますφ（－－）
これで完了でっす＼（－－）／
IETesterでIE6、IE7、あとは普通にIE8、Firefox、Google Chrome、
Opera、Windows Safariの最新版で確認した分にはOKでした。
IE9、10は確認していませんが、多分大丈夫だべ。
いらないかもですが、一応サンプル置いておきますねφ（－－）
そんな感じ（－－）ノ
IE7で表示されないけど何とかならんかね？（つд`）・°・。と、
ご相談をいただいたのがきっかけなんですけどね。
結論から言えば、こちらのjQueryプラグインで何とかなりましたφ（－－）
■jQuery Pseudo Plugin
http://jquery.lukelutman.com/plugins/pseudo/
ありがたや～（－人－）
使い方は該当のプラグインを読み込んで、あとはCSSを書くだけ。
CSSの書き方にちょっとだけ癖があるのでご注意ください。
IEで表示する用のCSSは
div#hoge {
before: "aaa";
after: "bbb";
}
before: "aaa";
after: "bbb";
}
のように要素内に「before:」「after:」を記述すればOKです。
ただしこれだけだと他のブラウザでは表示されません。
そこで普通のやり方で擬似要素を定義しておく必要もありますφ（－－）
div#hoge:before {
content: "aaa";
}
div#hoge:after {
content: "bbb";
}
content: "aaa";
}
div#hoge:after {
content: "bbb";
}
これで完了でっす＼（－－）／
IETesterでIE6、IE7、あとは普通にIE8、Firefox、Google Chrome、
Opera、Windows Safariの最新版で確認した分にはOKでした。
IE9、10は確認していませんが、多分大丈夫だべ。
いらないかもですが、一応サンプル置いておきますねφ（－－）
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.pseudo.js"></script>
<style type="text/css">
<!--
/* その他のブラウザ用の設定 */
div#hoge:before {
content: "aaa";
}
div#hoge:after {
content: "bbb";
}
/* IE用の設定 */
div#hoge {
before: "aaa";
after: "bbb";
}
-->
</style>
</head>
<body>
<div id="hoge">test</hoge>
</body>
</html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.pseudo.js"></script>
<style type="text/css">
<!--
/* その他のブラウザ用の設定 */
div#hoge:before {
content: "aaa";
}
div#hoge:after {
content: "bbb";
}
/* IE用の設定 */
div#hoge {
before: "aaa";
after: "bbb";
}
-->
</style>
</head>
<body>
<div id="hoge">test</hoge>
</body>
</html>
そんな感じ（－－）ノ
category:● HTML・CSS thema:パソコンな日々 - genre:コンピュータ Posted by ササキマコト