カテゴリー：備忘録

今回、偶然遭遇したIE6のバグ（？）をメモしておきます。
現象は、imgタグでマークアップした画像のボタンにaタグのonclickなんかで処理をさせる場合のもの。

今回、formの外からsubmit()を実行する必要があったので、onclickに関数を設定し、その関数内で処理を行ったあと、formのsubmit()を実行させたのですが・・。
なんでか、IE6だけどうしても動かない。なにをしても動かない。
原因はよくわからないが、onclickに設定した関数のあとにreturn falseを追加したらうまく動いた。

【推測】
社内で協議の結果、aタグ自身の動作とonclickで設定したsubmit()の処理がぶつかっているのでは？　ということに。
その証拠になるかは分からないけど、submit処理をたとえば

続きを読む "aタグのonclickを使うときの落とし穴（IE6）"

• パーマリンク
• コメント(0)
• トラックバック(0)

WWW WATCHさんのところで興味深い記事を見つけたので備忘録的に書いてみた。

タイトル通りだけど、どうやらIE7の隣接セレクタにはバグがあり、HTML文書でコメントアウトしている要素も"隣接"と認識してしまうもの、という感じ。

サンプルを書いてみた

IE7で隣接セレクタを使う際の注意点サンプル

IE7で見た隣接セレクタバグのサンプル画像

IE7で見てもらうとわかるけど、確かにコメントがあるだけで隣接セレクタが効いていない。
（サンプルの上がコメントあり、下がコメントをつけただけでHTML、CSS共にまったく同じ）

まだIE6が全盛だけど、そろそろIE7へ自動更新が始まるから、そうなったら隣接セレクタにお世話になりそう。そのときにこういった類のバグは覚えておくとあとあと楽かも。

▼ソースの紹介は以下から。

続きを読む "IE7で隣接セレクタに落とし穴？　IE7で隣接セレクタを使う際の注意点"

• パーマリンク
• コメント(0)
• トラックバック(0)

なんだかよく分からない現象が発生したのでメモ。

案件で、連続した英数字が入力された場合に、改行されずブロックが下に落ちてしまう現象が発生した。
（Firefoxでは問題ないが、IEでは勝手にwidthを変更してしまうためfloatが崩れる）
そこで、widthは固定なのでoverflow:hiddenで横にはみ出すテキストを非表示にすることで対応した。が。
なぜかブロック要素とも、インライン要素ともつかない変な挙動をしはじめた。
まず、内包しているインライン要素の幅が長くなると左にfloatしている要素のすぐ下、（見た目としてはfloatが落ちた感じ）になってしまった。
親要素にoverflow:hiddenを設定しているので、インライン要素がいくら横に伸びても親要素には影響ないはずだ。

が、見る限り、そのインライン要素のせいで下に落ちてしまっている。（その長い部分を消すとちゃんと上にくる）
しかし、親要素にwidthを明示的に設定していなかったのを発見し、widthを設定してみる。

これで問題解決か、と思いきや、今度はなぜか、設定していたmargin分、右にずれた。
しかし、本来このmarginはfloatしたボックスを回避するためのもので、floatされた要素に影響されないはずである。

にも関わらず、設定したmarginが、floatしている要素の端からの計算になっていたのだ。
（つまり、たとえば100pxの左にfloatしたボックスに対して、110pxのmarginを設定すると、そのfloatしたボックスから見て右に10pxの余白ができることになる）

しかし、実際はoverflowを設定した要素は、上の例で言えば110px右にずれていたのだ。
推測するに、overflowを設定すると、floatボックスとなるのではないか、と思った。
（もし、当たり前の挙動だったらコメントください；）

float下要素を表示させる、clearfixの中に、overflowを設定して背景を表示させるテクニックもあるが、おそらく、floatボックスとなることで背景が表示されるのではないか、と思う。

• パーマリンク
• コメント(0)
• トラックバック(0)

今回もまた、備忘録的なものです。

IEのCSS表示で、たまになんだか変な挙動になることありませんか？
高さがおかしくなったり、場所がずれたり。
ちょっとどこで読んだか忘れてしまったんですが、どうやら特定のスタイルを適用すると、レンダリングが変わるんだかなんだかだとか。（IEのみ）

なので、たまに「height」や「border」を設定すると表示が改善された、なんてことありませんか？
それらが、その「特定のスタイル」のようです。
だから、それらを設定することで正常に表示されたりするんですね。

ただ、borderにしろheightにしろ、IE用に適用させてしまうと、他のブラウザ（Firefoxとか）に影響が出ちゃいますよね。

そんなときに「zoom:1」です。
これはIE独自スタイルにも関わらず、上で書いたように「特定のタグ」の中に含まれます。
なので、heightなどで表示が改善されるような場合、そのスタイルに「zoom:1」を指定しておけば他のブラウザに影響を与えることなくIEだけにスタイルを適用することが可能となります。

なんかで行き詰ったら試してみるといいかも？

• パーマリンク
• コメント(0)
• トラックバック(0)

えぇ、これは完全に備忘録的記事です(;´д｀)

製作をしていて気づいたことがあったのでメモメモ。
なんか、とあるリンクをfloat:leftでざーっと並べたところ。
Firefoxではなんの問題もなかったんだけど、IE6、7ではなぜかマウスオーバー時にずれが生じて、floatが崩れるという現象がッ。

しばらく試行錯誤していたところ、
a要素にbackground: none;を追加してやったところずれが生じなくなった。
もともと背景にはなにも指定していないのになぜだろう・・。

なんとなく、挙動的にはマウスオーバー時にmarginだかheightだかが変更されるせいでずれが生じてるように見えてたんだけど、チェックのために背景を指定したらなぜかずれなくなったという・・(´・ω・｀)

とにかく解決してよかった(;´д｀)

• パーマリンク
• コメント(0)
• トラックバック(0)