忍者ブログ
bop日記
[19]  [18]  [17]  [16]  [15]  [14]  [13]  [12]  [11]  [10]  [9
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

昨日コーディング中に判明した不具合やら何やら、忘れないように覚書しておくよ!

不具合が出る条件(゜д゜)

1.table要素あるいはul要素(多分ol要素も)自体、あるいはそれを包含する要素でPNGファイルの表示を行い、
2.その要素を絶対配置(多分相対配置もアウト)する。

絶対配置した時点で、左上にPNGを表示させた要素「だけ」が固定され、そこからテコでも動いてくれなくなります。
(包含する要素は正しい場所に表示される)

さて、では解決策だよ!

たとえば次のような構造だとします。

<ul id="xxx" class="pngfix">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

.pngfixがPNGファイルの表示をさせるクラスです。
ここでul要素を絶対配置するとレイアウトが崩れます。
そこで、ul要素の内側にdiv要素を入れて、そこにPNGファイルを表示してやります

<ul id="xxx">
    <div id="xxxBugFix" class="pngfix">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </div>
</ul>

そして、この例で言えば#xxxで表示させていたbackground-imageを、ここでは表示せずに#xxxBugFixに表示してやるようにします。
もちろんこのままではwidthやheightが正しくないので、#xxxと同じだけのwidthやheightを与えてやります。
これで解決!(`・ω・´)
絶対配置されているのはul要素で、その内側のdiv要素自体は通常配置なので、DD_belatedPNG.jsのバグに引っかかりません。
ul要素自体にはPNGファイルを貼っていないので、ul要素が変な場所に行くこともないです。
絶対配置するtable要素にPNGを貼る場合、この方法は上手く行かないと思われるので、

<div id="xxx">    <!--この要素を絶対配置-->
    <table class="pngfix">
        .
        .
        .
    </table>
</div>

これで多分クリア出来ます。
(ただし、これだと絶対配置した要素が左上に残るので、レイアウト上問題を与えないようにサイズを変えておくとかした方がいいかもなんだぜ)

ul要素or table要素を含む要素を絶対配置する場合も対処は同じ。

<div id="xxx">    <!--この要素を絶対配置-->
    <div id="xxxBugFix" class="pngfix">
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
    </div>
</div>

とりあえず、対処のポイントとしては、表示崩れの原因となる要素自体だったり含んだりする場合、PNGを貼る要素が絶対配置にならないようにする、でいいと思います。

どこ調べても対応策どころかこのバグ自体が書いて無いので、一応書き残しておいたよ(´・ω・`)
疲れた……。
PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
カレンダー
08 2024/09 10
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
最新CM
[07/19 六道 迅]
[03/20 NONAME]
[03/18 NONAME]
[03/12 バーベラエ]
[02/06 守谷シゲタカ]
最新TB
プロフィール
HN:
nnbo
年齢:
41
HP:
性別:
男性
誕生日:
1983/08/15
職業:
webデザイナー
趣味:
作曲、お絵描き、小説書き
自己紹介:
日々をだらだら生きています。

詳しくはこちらを。
バーコード
ブログ内検索
P R
忍者ブログ [PR]

【PR】ホームページ制作ならリレイションシップへ【PR】

BLACK=OUT Projectホームへ