jQuery Mobile のサンプルを
http://demos.jquerymobile.com/1.4.5/listview/index.html
より
Count bubbles やSplit buttons のサンプルを「View Source」ボタンを押して
そのまま試してみた。（jQuery Mobile のcss やJavaScirp は導入しているのが前提で話をしています）
するとなぜか、height が2倍になってしまう、
この現象はFireFox とChrome で確認している。
しかしなぜそうなるのか特定するのに時間がかかったが、
どうも親要素li 要素が持つ.ui-listview, .ui-li-has-count, .ui-li-has-alt にあたるクラスの
line-height がnormal になっているのが問題みたい。
line-height なんて滅多に使わないので、値の設定に困るが、とりあえず0 にしたら大凡
Count bubbles の方のサンプルは治った。
/* listビューのバグ取り */
.ui-listview, .ui-li-has-count, .ui-li-has-alt{
line-height: 0;
}
しかしどうも、FileFox の方だけSplit buttons の方だけどうも
どうしても.ui-btn の下に隙間が出来てしまう。
理由は不明だが、Firefox はバージョンが変わると
バグが治ったり、新たな見栄え上のバグが出来たりと
しょっちゅうある事なので、とりあえず今回は放置すると思います（気になったら調べるけど）
メモでしたorz
追伸：
解決出来ました！
/* listビューのバグ取り */
.ui-listview, .ui-li-has-count, .ui-li-has-alt{
line-height: 0;
}
/* listビューのバグ取り(FireFox 用、IEとCrome は使っても使わなくても変化なし) */
.ui-listview > .ui-li-static {
padding: 0;
}
/* listビューのバグ取り(FireFox 用、IEとCrome は使っても使わなくても変化なし) */
.ui-listview > li h1, .ui-listview > li h2, .ui-listview > li h3, .ui-listview > li h4, .ui-listview > li h5, .ui-listview > li h6 {
margin: 0;
}
これでいけました(＾ω＾）ノ
[1回]
コメント一覧