WEBワンポイント

某サイトを作成していて、苦労したので個人備忘録です。

まず、HTMLファイルを基にしてphp出力にする特殊なサイトを
構築をしていたのですが、デザインは通常通りhtnlファイルでの作業となりました。

元々、このサイトは全くの別人が作成しているため、
詳細は不明だったのです。
ま、しかたないのでCSSを見ながら作業開始。

ほとんどの作業はFirefoxで基本ブラウジングしています。
その理由はプラグインのFirebugが使えるため、手放せないところにあります。

一般の方が閲覧しているブラウザは、やはりIE７～８あたりが多いため、
これらをデザインの基本にしてはいますが、CSS設定がピタッとくるのは
Firefox4だと思っています。

今回は、ほとんど使用率の低いIE6にも気を使い、サイト構成をしました。

Firefoxでのデザインを基にIe8とIe7での見栄えを比べます。
次にoperaやchome、safariなども確認をします。

ここで、ちょっと余談ですが、クロスブラウザの確認には、
IETester と　Adobe BrowserLab　を使用しています。
クロスブラウザ確認なら必須だと思います。

さて、今回はIE6でのズレを修正するために、ie6用のハックを試みました。

おなじみの、* html hogehoge{} をやりましたが、ie6だけでなく、
７までも対象になり変だな～？と思いDTDを見ると、
これが記述されていませんでした。
つまり互換モードになっていた訳です。

DTDが記述されていない場合、IE6には、アンダバーでの記述が
有効ですのでそれも試みましたが、なぜか不発に終わり、
確かdisplay:inline;の設定をしてもＯＫなはずだと思い、
やってみると成功しました。

例えば、ブロックをflortにした場合は、
display:inline;にしても影響はないので、ie6には有効になります。

今まではflortにはmaginを使用していなかったので、
この事実を思い出すまでうっかりしていましたが、このdisplay:inline;は
有効ですのでお試しを。

#box_content {
height:95px;
width: 175px;
font-size: 12px;
float: left;
color: #FFF;
border: 1px solid #FF0;
margin: 40px 0 0 15px;
display:inline;
}

他のCSSと組み合わせたため、その一部ですが、こんな感じです。＾＾