この問題を解決するには次の2つの作業が必要になります。ひとつはstyle定義の中でwidth;heightと同時にclipを指定することと、背景色をstyleでは定義せずにSCRIPTによって書き出すことです。
たとえば、
<style>
#test0{ position : absolute ;
left : 0px ;
top : 0px ;
width : 100px ;
height : 50px ;
background-color : #1e90ff ;
}
</style>
<DIV id="test0">test0</div>
これを表示してもN4ではwidth:100;height:50の指定とは無関係にtest0の文字の周囲に色が付くだけです^^;。
test0
Win N4
Win N7
Win IE6
そこで、CSSに
clip:rect(0,100,50,0)の指定を追加して逆に
background-color:#1e90ffをstyle内で定義するのをやめます。
そして更に、JavaScriptでNN,IE互換の背景色指定用function
setBGCOLOR()を記述しておきます。
<script language="JavaScript">
<!--
function setBGCOLOR(layName,color){
//opera6 は透明が効かないのでページ背景色と同色(ここではwhite)へ便宜修正
if(color=='')(navigator.userAgent.search("Opera(\ |\/)6")!= -1)
?color='white':color='transparent'; //←このwhiteは背景色に書換える
if(document.getElementById) //e5,e6,n6,n7,m1,o6用
document.getElementById(layName).style.backgroundColor =color
else if(document.all) //e4用
document.all(layName).style.backgroundColor=color
else if(document.layers){ //n4用
if(color=='transparent')color=null
document.layers[layName].bgColor=color
}
}
//-->
</script>
<style>
#test1{ position : absolute ;
left : 0px ;
top : 0px ;
width : 100px ;
height : 50px ;
clip : rect(0,100,50,0);
}
</style>
<DIV id="test1">test</div>
これであとは
setBGCOLOR('test1','#1e90ff')
を実行するとクロスブラウザで動作するようになります。
ちなみに上の例では
<body onLoad="setBGCOLOR('test1','#1e90ff')">
でこの関数を実行しています。