css」カテゴリーアーカイブ

IE6用にリセットcssに入れておくといいもの

1.li要素に display: inline を指定する
http://d.hatena.ne.jp/grandVin/20090207/1234031192

2.ほかは共通でこんな感じ
—————————–

/*reset*/
body{
padding:0;
margin:0;
height:100%;
}
*{
line-height:130%;
font-family:Arial, sans-serif;
}
ol,ul,li {
margin:0;
padding:0;
list-style:none;
}
h1,h2,h3,h4,h5,form,p {
margin:0;
padding:0;
font-size:100%;
font-weight:normal;
}
img{
border:none;
}
—————————-

3.filterがかからない時は
http://blog.nomadscafe.jp/archives/000402.html

.inlineFilter{
*display:inline-block;/*IE6,7*/
_display:inline-block;/*IE6*/
*display:block;/*IE7*/
}

 

リセットをメモしておきたいがための記事でした。

スマホサイトでよく使う > を右端にいれたリスト

思いつきでcss3で再現してみたけど、
やっぱりIEではバージョン古いと出ないのがリンクの役割を果たしていないと思い断念。

background: no-repeat right url(img.png),linear-gradient(to bottom, #7ad362 0%, #59ab42 100%);

グラデーションは背景色ではなく画像として認識されていて、
css3では1つの要素に画像が2つ読み込める。
これを利用して右端の > 画像とグラデーションをaタグのみに適応してみました。

結果、
適応してみましたが、レスポンシブサイトであったためIEでも見たい、
さらにAndroidのバグ対応のためaタグのblock要素内にはdivタグを追加するので、
aタグにグラデーションを、divタグに画像を設置する普通な仕様となりました。