2カラムのレイアウトで、左にナビゲーション、右にメインエリア。メインエリアでclearfixを使ったらカラム落ちしたので、ちょこっとメモメモ。
画面幅にしたがってメインエリアの幅を可変にしたいので幅は設定できない。はじめは左にマージンを持たせることで対応したらカラム落ちした。:afterのclear:bothが効いてしまってるらしい。
結局、メインエリアに「overflow:hidden」で何とかなった。。。と思う。
CSSの最近のブログ記事
元ネタはこちら https://www.softel.co.jp/blogs/tech/archives/4391
下記のように書く
a:focus, *:focus { outline:none; }
IEの場合は<input>がvertical-alignで高さ揃えができないので、display:inline;してからvertical-alignをかけるとよい。
jQueryで、イメージスライダーを実装した際、Chromeで二つの不具合が発生。けっこうレアなバグだと思うのでメモメモ。
使用したプラグインは、「jquery.bxslider」。
◆その１ 画像ズレ Chrome全般
後続の要素の画像が、スライダーが動くたびに1pxほどずれては戻り、ずれては戻り。
センタリングしているものがズレているのは分かったが、他の画像は物によって症状が出ない。
原因は、ズレる画像の親要素の幅が奇数pxだったこと。偶数ピクセルにすると症状が出なくなった。
◆その２ テキスト色が薄くなる Mac Chrome ＆ Mac safari
後続の要素のテキストが、スライダーの動きにつられて薄くなっては戻り、薄くなっては戻る。
症状の出ない箇所を参考に調べたところ、背景色がついてない場合に症状が出ることがわかった。
すべての要素に背景色を付与して症状が出なくなった。
-----------------------------------------------
文字サイズのrem、これ効きません。
自分じゃ使わない単位だけど、ｊQueryプラグインとかでハマった時に疑ってみるべし。
-----------------------------------------------
form で、チェックボックス本体を非表示にしてラベルだけ見せて選択させるケース。
IE標準化用のプラグインを入れてくと、とりあえず「:checkd」は効く。
「+」も効く
だけど、チェックボックス本体を「display:nane;」にしてしまうと、「+」が効かなくなる。どうも「まったっくもって無い」ものとして扱われるらしい。
-----------------------------------------------
-----------------------------------------------
-----------------------------------------------
-----------------------------------------------
-----------------------------------------------
-----------------------------------------------
-----------------------------------------------
こんな感じで書く
input[type="text"]{
margin:20px;
}
input[type="checkbox"]{
margin:10px;
}
IE8で指定のフォントサイズになっていない
今回は、IE8だけにフォントファミリーを設定することで解決。
※IE9は問題なし
※IE6-7は未検証
ウェブフォントを使用したのに、自分のPCでは効いているのに他の端末では効かなかった。
原因は、フォントへのパス書き方のミスでした。
ローカルにそのフォントが入っていると、そちらを読んでしまい、自分のPCでは正しく表示されてしまうので、原因が分かりづらかったです。
position:relative; を指定することで解決。
子要素にposition:relativeを指定した場合に、親要素で指定したoverflow:hiddenが効かなくなる。
なので、親要素にposition:rerative;を指定すればOK
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を入れるのか。どうやらスマートじゃない解決法しかないらしい＞＜
と、実装してみたら上手くいかないなｗ もうちょい調べる必要あり
を読んで整理してみると、、、、空div入れる場所を間違えてました。消えてる要素の後ろに入れるのが正解。