css

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: , , ,

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: , ,

文字の左1px分が欠ける現象

overflow:hidden;が指定された領域内で、文章の先頭文字が欠けてしまう現象が発生しました。
windowsのIEのみではなく、今回はFireFoxでも同様の現象が見られたため、この問題が解決するまでに結構な時間を・・・。

OSの問題?
フォントの問題?
フォントサイズの問題?
overflow:hidden;の指定領域の問題?

複数の観点から調べてみました。

まず、OSの問題かということについてですが、今回はwindowsのみで発生していてmacでは発生しなかったのでOSに何かヒントがないかということで、Windows XP での全角固定ピッチフォントの仕様変更を確認しましたが、今回使用しているフォントがプロポーショナルフォントであるMS Pゴシックであることからも、ここに問題があるとは思えません。

次にフォントの問題?かという点についてですが、たしかに問題が発生しているのはMS Pゴシックのときでそれを使用するwindows側ブラウザのみに発生している問題でした。
macはデフォルトのフォントが異なるためこの現象は発生しません。
フォントの表示領域に問題があるかもしれないが、確かではない感じです。

フォントサイズの問題?という点ですが、こちらも特定の大きさの場合のみ今回の現象が発生しました。
14px相当前後の場合に発生した問題です。
しかしこれを原因としてしまうと、14pxがダメなのか!?ということにもなり納得がいきません。

最後にテキストの表示領域自体に何らかの問題がないかについてです。
テキストが表示されるエリアに指定しているCSSをすべて細かく見ていくと、overflow:hidden;が影響していることわかりました。
まずはhtmlをみてみます。

<div class=”contents”>
<p>ぐぐぐぐぐぐぐぐぐぐぐぐぐぐぐ</p>
<p>aaaaaaaaaaaaaaaaaa</p>
</div>

これに対してcssは、

.contents{
width:640px;
padding:20px;
}

.contents p{
width:600px;
overflow:hidden;
}

としていました。
ここでpに指定したoverflow:hidden;が無いと、文字は欠けずに表示できました。

ただし、ここでの疑問は領域(ボックス横幅)についてはきちんと確保しているにも関わらず、overflowを指定しているとその計算が狂ってしまい先頭文字の開始位置が左にずれてしまうことです。

ここで、pに対してoverflow:hidden;が無ければ文字が欠けない訳ですが、それでは困るので代替手段としてoverflowの指定場所を変えました。

.contents{
width:640px;
overflow:hidden;
padding:20px;
}

.contents p{
width:600px;
}

pを内包する親要素に対してoverflow:hidden;を指定することにしました。
こうすると若干文字のはみ出し方に違いは出ますが、とりあえずは解決です。

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: , , ,

FireFoxで画像置換したリンクのアウトラインが画面左に伸びる

overflow:hidden;の指定。

また、macIE5のバグ回避のため、
/*\*//*/
li.a{overflow:visible;}
/**/
とする。

Tags: , ,

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

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

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

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

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

Tags: , ,

2021年12月
 1234
567891011
12131415161718
19202122232425
262728293031