Blogger 上で JavaScript - その 1 (onmouseover | onmouseout | onclick)

a 要素に以下のイベントを追加
※ 実際のコードは (") は &quot; で (<) は &lt; で (>) は &gt;。

• onmouseover
  var el=document.getElementById('javascriptonblogger1');
  el.innerHTML='<div>mouseover!</div>\n'+el.innerHTML;
  this.style.backgroundColor='#ccccff';"
• onmouseout
  var el=document.getElementById('javascriptonblogger1');
  el.innerHTML='<div>mouseout!</div>\n'+el.innerHTML;
  this.style.backgroundColor='#999999';
• onclick
  var el=document.getElementById('javascriptonblogger1');
  el.innerHTML='<div>mouseout!</div>\n'+el.innerHTML;
  this.style.backgroundColor='#999999';

mouse over, click and out

logs

ブラウザのうまくない CSS レンダリング - その 1 (line-height)

固定テキストをページのフッタとして表示している "position:absolute;bottom:0;" の div 要素に内容を追加して 2行したので、style に "line-height:120%;" を追加したところ、画面からはみでてスクロールバーが。。。

検証用コンテンツ

iframe

メイリオだと line-height:120% で。。。

iframe

verdana だと line-height:120% は問題ないけれど、

iframe

line-height:100% で。。。

iframe

MS P Gothic だと line-height:100% でも大丈夫。

確認

• Microsoft Windows XP Professional Version 2002 Service Pack 3
• Firefox version 3.6.9

Internet Explorer 7 で確認したら、画面からはみ出ないけれど、フォントの上側の一部が表示されないことがあるので、どちらにしても "position:absolute;bottom:0;" と "line-height:xxx" の組み合わせは注意。