« 前のひとこと | トップページ | 次のひとこと »

cocolog:78822199

Safari 5 でだけ、display: inline-block がうまく表示されないことに悩む。 (JRF 4545)

JRF 2014年1月31日 (金)

hide_img.js を作っててぶつかった問題。

結論としては、Safari だけ float:none が必要だった。

JRF2014年1月31日4303

《hide_img.js》
http://jrf.cocolog-nifty.com/archive/lib/hide_img.js
http://jrf.cocolog-nifty.com/archive/lib/hide_img.css

これの機能とポリシーに関しては今のところ↓。
《デスクトップ壁紙公開についてのこのサイトのポリシー》
http://jrf.cocolog-nifty.com/column/2013/09/post.html

JRF2014年1月31日9235

やろうとしていたのは、イメージの部分に特定のクラス(今回は "sexual")が設定されていると、そこのイメージをボックスで覆って、クリックがなされたらその覆いを外す。…という機構。

JRF2014年1月31日1261

最初、window.confirm を使わず、同等のことを overlay とかでやろうとしてたんだけど、クロスブラウザ対応まで考えると、うまくできず断念。

そのときダイアログをポップアップさせたりしようとして position: relative とか position:absolute とか、ボックスを重ねたりとかいろいろやってた。

window.confirm を使うようにしたところ、その辺をとっぱらえてソースがかなりスッキリした。

JRF2014年1月31日9904

そして、relative な span の中にある img の部分に absolute な div を重ねようとするんだけど、どうしてもうまくいかない。absolute で top: 0px とかやってるのに img の表示後の座標からスタートしてるみたいな感じになる。img も absolute な div も span の子要素なのに。

JRF2014年1月31日8684

しかたなく、img を表示したまま上に重ねて隠すのは諦め、一端、display:none してあとから display:inline に戻すようにした。

JRF2014年1月31日0861

……。

次に問題になったのはアンカー a のイベント関連。イメージにアンカーが付けられてるところのイメージをウィジェットで置き換えて、そこでは、stopPropagation とかまでやってるのに、その親の a href がどうしても評価されてしまう。

addEventListener の第3引数関連でも、これについてはダメっぽい。

しかたなく、img を display:none にするとき、その親要素が a であったら、そちらとまとめて display:none するようにして対応した。

JRF2014年1月31日5382

……。

display:none までしちゃえば、そこにボックスを作るんだから、「こうなれば簡単」と position:relative とかそういうのも外してやると、border とかがまったく効かなくなる。

どうも span は display: inline だから、ボックス的なことはできないということらしい。

で、調べるとそういうときは display: inline-block が便利なようなのでそれを使い解決!

JRF2014年1月31日6082

IE でもうまくいってたから、それでいいやと公開した。

あとから気になって、Chrome, Opera も調べるが、これらは OK。でも Safari だけ inline-block なのに inline でしかないような border のない表示になる。なして?

JRF2014年1月31日4721

……。

ググっても、スペース関連でおかしいという意見は散見するがズバリの解答はない。ただ、Safari との関連としてではないが、inline-block を使うときは float が問題になってるような書きぶりのサイトが結構ある。

関係ないはずだが一応試してみるか…と、float: none を使ってみると…Safari でもうまくいった!

JRF2014年1月31日3328

……。

あとは、縦の中揃えのために一端外していた position: relative と position: absolute を復帰。他といっしょくたにしていた CSS ファイルを分ける。

…なぜか、text-align: left 指定したみたくなってる。

まぁ、これはファイル分けるときによくあるミスで、position 指定とかといっしょに導入したからなかなか原因を特定できなかったが、結局は CSS の評価順の問題。要素のセレクタをより具体的にすることで解決した。

JRF2014年1月31日5793

例としては一番上のほうにある hide_img.css を見ればいいと思う。CSS だけなら十分コンパクトだから。

JRF2014年1月31日4927

« 前のひとこと | トップページ | 次のひとこと »

トラックバック


トラックバックのポリシー

他サイトなどからこの記事に自薦された関連記事(トラックバック)はまだありません。