カテゴリー:備忘録

表示タイプ
リスト表示へ
ボックス表示中

IE7で隣接セレクタに落とし穴? IE7で隣接セレクタを使う際の注意点

2008年2月 8日 13:37

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

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

▼サンプルを書いてみた
IE7で隣接セレクタを使う際の注意点サンプル

▼IE7で見た隣接セレクタバグのサンプル画像
IE7で隣接セレクタを使う際の注意点サンプル画像

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

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

▼CSSソース
  1. .testbox + .testbox02 {
  2. color: #f00;
  3. font-weight: bold;
  4. }
▼HTMLソース
  1. <div id="test01">
  2. <div class="testbox">
  3. <p>テスト用BOX</p>
  4. </div>
  5. <div class="testbox02">
  6. <p>隣接セレクタ用BOX</p>
  7. </div>
  8. </div>
  1. <div id="test02">
  2. <div class="testbox">
  3. <p>テスト用BOX</p>
  4. </div>
  5. <!-- comment out -->
  6. <div class="testbox02">
  7. <p>隣接セレクタ用BOX</p>
  8. </div>
  9. </div>

overflowを設定するとボックスタイプが変わる?

2007年6月20日 17:31

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

案件で、連続した英数字が入力された場合に、改行されずブロックが下に落ちてしまう現象が発生した。
(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ボックスとなることで背景が表示されるのではないか、と思う。

魔法の言葉「zoom:1」

2007年5月17日 17:50

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

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

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

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

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

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

マウスオーバーでなんかずれる

2007年5月 9日 16:18

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

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

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

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

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