CSSの background-image の position を変化させて
ロールオーバーを実装したときに、画像が表示されるたびに
ちらちらと画像が消えては表示される、ちらつきがでる場合があります。
background-position を変更するたびに画像を再読み込みしているのが
原因らしいです。また、この現象は、IE６特有で他では起こらないとのことです。
対処法としては、
CSSのみで対処する場合
html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
Javascriptで対処する場合
try {
document.execCommand(”BackgroundImageCache”, false, true);
} catch(e) { }
expression はもっぱら処理が遅いとのことなので
Javascriptで対処するほうが良いのかな。
CSSの background属性の取得について、だめだった報告。
Javascriptで以下のように 単純な jQuery を利用したソースを書く。
（Firefox2,IE６にて）
<html>
<head>
<style type="text/css">
#hoge{
background: transparent url('hoge.gif') no-repeat 10px 10px;
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<div id="hoge"></div>
<input type="button" id="btn" value="background get!">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
alert( $('#hoge').css('background') );
});
});
</script>
</body>
</html>
上記で ボタンを押すと、アラートが表示されるが、FireFoxは空欄が表示され、IE6は、undefined が表示される。
次に backgroundを 個別の属性に分けて試してみると
値が取得できた属性
値が取得できない属性
background-position を backgroundPosition としてみても取得はできなかった。
なぜ、background-position だけ取得できないんでしょうかね？
特別な意味でもあるのかな？
はてなで質問してみてるけど、どうも仕様的にそうなってるみたいな雰囲気？？？
長い半角英数字が改行されず思いのほかレイアウトが崩れることってありますよね。
特に掲示板みたいなユーザに入力してもらうようなシステムの場合
開発時に想定してなかった長い半角英数字なんかをいれられて、
後から「おおおなんじゃこりゃぁああああ」なんてことがたまにあります。
ただ、最近までレイアウトが多少崩れても「まぁいっか」くらいの気持ちでして（←だめだね）
どうしても解決しなければいけないときは、textarea を強引に流用したり誤魔化してきたような。。。。とはいえ、そんなずぼらなことではいけない気もするのでjQueryのプラグインを作ってみました。
IE系のCSSには、独自に拡張した word-break: break-all; を使えばすぐに解決できるのですがそれ以外のブラウザがまだ対応してないみたいでここがちょっとネックですね。
CSS3くらいには標準になるのかな？
いろいろ、調べてみると任意改行文字 8203を使うのがなんとなく意図した内容に近いみたいです。
各テキストの1文字ずつにこれを挟んでようやく解決。（しかし、テキストの量が多くなると処理に時間がかかりすぎるかも）
（追記）2009/12/09 version 0.2 以下の参照ページでご指摘いただいた修正をしました。
【jQuery】word-break:break-all;をie以外でも実装するjQueryプラグイン
げことじさんありがとうございました。
jQuery(function($){
$.wb = {
version: 0.2
,sep: String.fromCharCode(8203)
,remake: function(elm){
var h = elm.contents();
elm.html('');
$(h).each(function(){
if(this.nodeType == 3){
elm.append($.trim(this.textContent.split('').join($.wb.sep)));
}else if(this.textContent == ''){
elm.append(this);
}else{
elm.append($.wb.remake($(this)));
}
});
return elm;
}
}
$.fn.wb = function(){
if(/msie/i.test(navigator.userAgent)){
$(this).css('word-break', 'break-all');
}else{
$.wb.sep = (/firefox\/2/i.test(navigator.userAgent)) ? '<wbr />' : String.fromCharCode(8203);
$(this).each(function(){ $.wb.remake($(this));});
}
return $(this);
}
});
参考：FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
しかし、この任意改行文字のような特殊文字って結構あるんですね。
ぜんぜん知りませんでした。
※作ったもののJavascriptがONじゃないと使えないですねぇ。。。
CSSのせいでした。ってのがおちなんですが
Google swiffy で書き出したJavascriptで描画されるSVGのテキストフィールド部分に body タグが使われているみたいで、HTML全体のbodyタグに背景黒を指定していたCSSがそのままテキストフィールドの背景色にも影響してしまいました。
ですので、とりあえず body タグに対する背景色指定をはずして
id指定にしました。
body{
background-color:black;
}
<body>
#aaa{
background-color:black;
}
<body id="aaa">
初期化以外で、やっぱりid,class指定のないスタイルを使ってはいけないなと思いました。
