バグ

IEバグ:overflowを設定したボックス内のposition指定した要素が動かない

サイトの特性上、あまり今までoverflow:auto やoverflow:scroll-y などを使うことが無かったのですが、ここにきてIEのバグに遭遇しました。

まずバグの概要ですが、

・親ボックスはoverflow:scroll-yとheightを設定していて、内容物が高さを超えると縦スクロールバーが出るようにしていた。
・内包要素にはpositionによって配置されるパーツがあり、relativeとabsoluteによって配置していた。
・IE6,7,8,9でバグが発覚。position:relativeを指定した要素が親ボックスのスクロールに連動せず、頑なにその位置から動こうとしない。

という状態になりました。

解決方法

overflow:scroll-y;を設定した要素にposition:relative;を追加する。

ということで解消です。

2012年に発見するようなバグでもないかもしれませんがメモしておきます。

Tags: , , ,

Chromeでフォントサイズ10px相当の場合にリンク下線が消える

こんなバグが上がってきたのでメモ。

【現象】
10pxのテキストリンクをマウスオーバーした場合の下線が表示されません。
※Chromeで発生。ブラウザの拡大/縮小が100%の状態で表示されません。(110%では表示されます。)
【期待値】
Chrome使用時、テキストリンクをマウスオーバーした場合の下線が表示されること

まずリンクへのtext-decolationの設定は、このようにしていた。
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{text-decoration:underline;}
a:focus{text-decoration:underline;}

この設定が入っていたにもかかわらず、10pxのテキストリンクにマウスカーソルが乗ってもリンク下線が出なかった。
しかし、他の場所にある同じ条件のリンクでは、下線が出るケースがある。。。。。

スタイルの影響が考えられるとすれば…
line-hightか、paddingか、marginか、font-sizeか、font-familyか…
しかし、この辺り変えてしまうと他のブラウザにも影響があるので、Chromeだけ何とか対応したいが、調べていくとどうもChromeのバグっぽい。

それぞれのプロパティを少しずつ変えてみたところ、

line-hight…変えても効果なし
padding…padding-bottom: 1px;を入れると下線が出た。
margin…変えても効果なし
font-size…9pxでは下線が出ないが、11pxなら出る。
font-family…arialを指定したら下線が出た。sans-serifやMS Pゴシックでは下線が出ない。

という結果に。

余白やフォント設定が影響している感じはするが、どうにもつかみどころのない感じ。
しかもついでに違うバグまで見つかってしまった。。。。。。。。。。

「10pxのテキストリンクで、通常時とオンマウス時でリンク色を変えている場合にオンマウス時に下線の色だけ通常時の色になる!」

もう知りません。

Tags: , ,

IEでwhite-space:nowrap;を指定した要素の一部が消える、改行する

どうもIEとwhite-space:nowrap;は相性が悪いようで、バグもよくweb上で見かけるわけだが、今回はこんなバグに遭遇しました。

今回の条件:
white-space:nowrap;を指定しているa要素で、そのa要素に背景画像で先頭にアイコンを設定している場合。
IE6,IE7ともに発生、その他Firefox safariなどは問題なし。

発生した問題:
テキスト部分はwhite-space:nowrap;がきいていたが、アイコン表示部分だけが上の行に残ってしまった。
また、アイコン自体も表示されなかった。

対応:
white-space:nowrap;を設定した要素に対してzoom:1;を設定することで問題を解消した。

Tags: , ,

IEでoutlineの領域が広がる

IE6,7でword-wrap:break-word;を適用したところ、とある問題(バグ?)に遭遇しました。

横幅指定のあるボックス内にテキストが入るような状況で、半角英数記号が連続する場合に、これまでは

word-break:break-all;

でIEには折り返しの対応をしていましたが、今回は

word-wrap:break-word;

で対応してみることにしました。

すると、折り返す半角英数記号がリンクの場合、outlineだけ右にはみ出てしまうのです。
かといって、クリッカブル領域もその分広がるのかというと、そうではないようです。

screenshot

残念な表示をしてくれるIEのために、結局これまでどおりの
word-break:break-all;
をIEのみに適用することにしました。残念。

ちなみにFireFoxなどのモダンブラウザではoverflow:hiddenないしはword-wrap:break-word;でこれまで対応してきました。

FireFoxで半角英数の折り返し処理を適用できるようになっただけでもまだマシということで…

Tags: , , , , ,

overflow:auto;を指定した要素の背景画像が固定できない件

ある特定のボックスであるdivの高さと横幅を固定とし、テキストがその領域からはみ出る場合にスクロールバーが出る設定を以下のようにした。

div#messageArea{
width:600px;
height:150px;
overflow:auto;
padding:12px 10px;
border:1px solid #CCC;
background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0;
}

まずこれでIE以外のブラウザでは背景画像をdivの領域内で固定できた。
このままだと、IEで背景画像はスクロールで消えてしまうため、
ここにさらにbackground-attachment:fixed;を追加。

div#messageArea{
width:600px;
height:150px;
overflow:auto;
padding:12px 10px;
border:1px solid #CCC;
background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0;
background-attachment:fixed;
}

こうした場合、IE6以外のブラウザで背景画像の開始位置の解釈が変わり、ウインドウの左上が開始点となってしまった。
そのため、IE6専用にハックをつける。

div#messageArea{
width:600px;
height:150px;
overflow:auto;
padding:12px 10px;
border:1px solid #CCC;
background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0;
_background-attachment:fixed;
}

ここまでで、FireFox3.6,Safari4,IE6には対応できた。
が、IE7では背景画像は出るが、固定はできていない状態。

ここまでが限界だったため、いろいろ調べてみたところ、
ここの一番下に探し求めていた情報がありました。

背景画像を固定しない場合
・背景画像を設定したボックス内の左上が0%位置となる。
・IEも同様。

背景画像を固定した場合
・背景画像の0%位置は閲覧領域(自分の場合はウインドウの左上)となる。
・IEの場合、body要素とhtml要素に背景画像を指定した場合は上と同様。
・IE6でそれ以外の場合は背景画像を設定したボックス内の左上が0%位置となる。
・IE7でそれ以外の場合は閲覧領域(ウインドウ)の左上が0%位置となる。

ただ、自分の場合についてはdiv要素の位置が常にウインドウの左右中心で、上から200pxの位置にあったため、以下のように無理やり背景位置を固定とした。

div#messageArea{
width:600px;
height:150px;
overflow:auto;
padding:12px 10px;
border:1px solid #CCC;
background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0;
*background-attachment:fixed;
*background-position:50% 200px;
_background-position:0 0;
}

IE以外のブラウザでは背景固定を設定しない(fixedにしなくても背景が固定されるから)で背景位置を00ポジションに設定。
IE6,IE7は背景画像を固定し、ウインドウの左上を始点として背景画像の位置を設定。
IE6は背景画像を固定にしても、背景画像の開始位置がdiv要素の左上になるためウインドウではなく、divボックスの左上を背景画像開始点とする。

Tags: , , ,

border-collapse:collapse;を指定したtableが左にズレるバグ

FireFoxでサイトを確認したとき、border-collapse:collapse; が指定されたtableが親要素から左に1pxずれるバグがありました。

原因がイマイチ分かりませんが、おそらくmozillaのバグなんでしょうね。

ここにも載ってました。

http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=4246

しかも解決済みだということですが、いまだに直らないってことは解決していないのでしょうか??

それともこちらのマークアップにミスが!?

こんな構造になっていようが、

にしようが、ずれるもんはずれるんです。

結局、ボーダーをtableに指定しないで、tableをdivで囲ってあげてそのdivにボーダー指定するか、

FireFoxだけ、border-collapse:collapse; を指定しないかで解決したんですけどね。

うーん。。

Tags: , , ,

liをdisplay:block;で扱う場合のIEのバグ

ナビゲーション、メニューなどのリストの作成を、liをブロック要素として並べて使う場合に、IEでは個別のliブロックの下に変な隙間が入ってしまう件について。

単純にそのブロックに横幅を指定してあげれば解決する。

htmlの書き方でliごとに改行しないなどの方法がネット上でいくつか見られたが解決に至らなかった。
別の方法として、ulに対してline-height:0;とし、liにline-height:auto;とする方法も見つかったがコレも解決にいたらず。

というわけで、今回のIEのバグは横幅指定で解決しました。

Tags: , ,

FireFox3のフルページズームに関するバグ?

親ボックス内3カラムの子ボックスをフロートで配置したレイアウトの場合に、FireFox3のフルページズームの縮小を行うと3カラム目のボックスが落ちる現象を確認。

原因をネットで探してみた中で、解決に一番近い情報が確認できたサイトが、Firefox 3 のフルページズーム使用時はスクリーン上でのピクセル量とCSS上でのピクセル量 なのだが・・・・

・親ボックスの横幅に対して、3つの子ボックスそれぞれにも横幅が指定され、合計で親ボックスの全幅となる。
・float:left; float:left; float:right; で配置。
・フルページズーム機能の縮小の場合のみ、3カラム目が下に落ちる。

とりあえず、ボックスのカラム落ちを回避した方法は・・・

子ボックスの幅をどれかひとつ数ピクセル縮める。

カラム落ちする場合の縮小したイメージをよく見ると、どうやら余白やコンテンツ幅のpx指定がうまく効いていないっぽいことでレイアウトが崩れている。
フロートの解除に関するスタイル指定のミスではなかったので・・・・

これでいいのだろうか??

Tags: , ,

FireFox3のズーム機能で縮小するとレイアウトが崩れる

floatで配置した3カラムデザインのうち、FireFox3のズーム機能を使って(テキストのみのズームではない)一番右のカラムが下に落ちてしまった。

ボックス内の全幅は500pxとして、CSSで150px 200px 150pxと指定していた。
それぞれ、float:left; float:left; float:right;で配置していた。

どうやら縮小するとwidthの解釈がおかしくなるらしい・・・

この問題を解決するために、真ん中のカラムの幅を1px減らして199pxにしてみたら直った。

はたしてこれで問題解決になってるのだろうか???

Tags: , ,

IEでスクロールした分だけborderが消える現象

IE6と7で、floatで配置していたboxのボーダーが、スクロールした分だけ消えていく・・・・

これはfloatで配置しているのが原因なのか、別の原因なのか?

この問題。。。

これは世間で言うところのpeek-a-booバグですね。
解決策は・・・
親のボックスに*height:1%;を指定する。
親のボックスに背景色を指定してあげる。
親のボックスにちゃんと横幅を指定する。

どれでも解決しました。

他にはfloatするboxに含まれる要素にposition:relative;を指定するというのも。

Tags: ,

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31