CSSの最近のブログ記事

レスポンシブでclearfixがエラー

2カラムのレイアウトで、左にナビゲーション、右にメインエリア。メインエリアでclearfixを使ったらカラム落ちしたので、ちょこっとメモメモ。

画面幅にしたがってメインエリアの幅を可変にしたいので幅は設定できない。はじめは左にマージンを持たせることで対応したらカラム落ちした。:afterのclear:bothが効いてしまってるらしい。

結局、メインエリアに「overflow:hidden」で何とかなった。。。と思う。

 

 

元ネタはこちら https://www.softel.co.jp/blogs/tech/archives/4391

下記のように書く

a:focus, *:focus { outline:none; }

IE対策|とボタンがずれる

元ネタは http://www.export-japan.co.jp/blog/ie%E3%81%A7%E3%81%AF%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%EF%BC%88%EF%BC%89%E3%81%A8%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%8Cvertical-alignmiddle/

 

IEの場合は<input>がvertical-alignで高さ揃えができないので、display:inline;してからvertical-alignをかけるとよい。

chromeの不具合

jQueryで、イメージスライダーを実装した際、Chromeで二つの不具合が発生。けっこうレアなバグだと思うのでメモメモ。

使用したプラグインは、「jquery.bxslider」。

 

◆その1 画像ズレ Chrome全般

後続の要素の画像が、スライダーが動くたびに1pxほどずれては戻り、ずれては戻り。

センタリングしているものがズレているのは分かったが、他の画像は物によって症状が出ない。

原因は、ズレる画像の親要素の幅が奇数pxだったこと。偶数ピクセルにすると症状が出なくなった。

 

◆その2 テキスト色が薄くなる Mac Chrome & Mac safari

後続の要素のテキストが、スライダーの動きにつられて薄くなっては戻り、薄くなっては戻る。

症状の出ない箇所を参考に調べたところ、背景色がついてない場合に症状が出ることがわかった。

すべての要素に背景色を付与して症状が出なくなった。

IE8、バグフィックスのメモ

-----------------------------------------------

文字サイズのrem、これ効きません。

自分じゃ使わない単位だけど、jQueryプラグインとかでハマった時に疑ってみるべし。

-----------------------------------------------

form で、チェックボックス本体を非表示にしてラベルだけ見せて選択させるケース。

IE標準化用のプラグインを入れてくと、とりあえず「:checkd」は効く。

「+」も効く

だけど、チェックボックス本体を「display:nane;」にしてしまうと、「+」が効かなくなる。どうも「まったっくもって無い」ものとして扱われるらしい。

-----------------------------------------------

-----------------------------------------------

-----------------------------------------------

-----------------------------------------------

-----------------------------------------------

-----------------------------------------------

-----------------------------------------------

こんな感じで書く


input[type="text"]{
    margin:20px;
}
input[type="checkbox"]{
    margin:10px;
}

IE8で指定のフォントサイズになっていない

今回は、IE8だけにフォントファミリーを設定することで解決。

※IE9は問題なし
※IE6-7は未検証

ウェブフォントの落とし穴

ウェブフォントを使用したのに、自分のPCでは効いているのに他の端末では効かなかった。

原因は、フォントへのパス書き方のミスでした。

ローカルにそのフォントが入っていると、そちらを読んでしまい、自分のPCでは正しく表示されてしまうので、原因が分かりづらかったです。

Firefoxのバグ?tableのborderが消える

position:relative; を指定することで解決。

子要素にposition:relativeを指定した場合に、親要素で指定したoverflow:hiddenが効かなくなる。

なので、親要素にposition:rerative;を指定すればOK

IE6でposition:absoluteのバグ

http://doruby.kbmj.com/mai_on_rails/20090126/IE6_position_absolute_

http://jmblog.jp/misc/disappearance-of-an-absolute-positioned-box-in-win-ie/index.ja.html

空divを入れるのか。どうやらスマートじゃない解決法しかないらしい><

 

と、実装してみたら上手くいかないなw もうちょい調べる必要あり

http://jmblog.jp/archives/180

を読んで整理してみると、、、、空div入れる場所を間違えてました。消えてる要素の後ろに入れるのが正解。

IE向けのCSSハック

アーカイブ

ウェブページ