bop日記
×
[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を貼る要素が絶対配置にならないようにする、でいいと思います。
どこ調べても対応策どころかこのバグ自体が書いて無いので、一応書き残しておいたよ(´・ω・`)
疲れた……。
不具合が出る条件(゜д゜)
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