Archive for 12月, 2011
最近見たページ
今年も勉強させていただきました、ありがとうございます。
Coding Contest #02
http://lp9cc.pxgrid.com/
inline-blockをie6，7でも対応させてFirefoxなどで隙間をなくす方法。ついでにブレッドクラムとCSS3でAppleメニュー作ってみた
http://worldwidedeb.net/2011/03/20/inline-block-ie6-7-css-apple
CSS IE6でliの隙間問題
http://underground7.blog116.fc2.com/blog-entry-15.html
OOCSS(Object-Oriented CSS)の考え方
http://d.hatena.ne.jp/in0in0/touch/20100208/1265657205
SEOの終わりとソーシャルとnanapiのコンテンツの未来
http://lite.blogos.com/article/3085/
New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5
http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5
フォームとアクセシビリティ
http://www.kanzaki.com/docs/html/htminfo33.html
Scalable and Modular Architecture for CSS
http://smacss.com/book/
RewriteRule
Dependency Injection
viコマンド
http://yamabito.main.jp/linux/vi_commands.htm
CSS Nite LP 9.2 (reprise) フォローアップ
http://www.yomotsu.net/wp/?cat=17&paged=2
レスポンシブWebデザイン
もうlast-childとfirst-childくらい使いたいAdd Star
IE7で親要素と子要素の間にHTMLのコメントがあるとチャイルドセレクタなどが適用されない
http://ameblo.jp/regolbema/entry-10826427620.html
IE6、IE7、IE8におけるCSSの違いまとめ
http://s.news.mynavi.jp/news/2009/10/16/062/index.html
スマホ対応の新潮流「レスポンシブWebデザイン」とは？
http://ascii.jp/elem/000/000/613/613028/index-3.html
safari line-height:0 バグ
SVN コマンド 実行 中止
IE6, IE7でもRGBaを使う
http://css-eblog.com/csstechnique/rgba-for-ie.html
全てのtextareaを自動的にリサイズするJavaScriptとGreasemonkeyAdd Star
http://www.kanasansoft.com/weblab/2008/05/post_28.html
textareaの高さを自動調節
http://dev.chrisryu.com/2008/05/rej_resize_textarea_by_avascript.html
「内容に合わせて伸縮するテキストエリア」を Opera にも
http://d.hatena.ne.jp/miya2000/20071004/p0
ちょっと小細工：textareaの高さを自動調節
http://furyu.tea-nifty.com/annex/2008/05/textarea_f641.html
Resizable Textarea
http://userscripts.org/scripts/review/12933
textareaの高さを自動調節するブックマークレット
http://d.hatena.ne.jp/tanku/20080521/1211389954
textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ
http://dev.iralog.net/2008/05/textarea.html
Elastic – Dynamic Height Textarea Jquery Plugin | Unwrongest
http://unwrongest.com/projects/elastic/
オンラインデスクトップサービスとしてのWebOSの意味
http://d.hatena.ne.jp/NGC2237/20070311/1173712927
Stylus vs SASS vs LESS error reporting
http://tjholowaychuk.com/post/5002088731/stylus-vs-sass-vs-less-error-reporting
IE6 で position:relative; を指定した要素のレイアウトを JavaScrip で変更した時に位置がずれる際の解決方法
http://vosegus.org/blog/2010/10/ie6-positionrelative-javascrip.html
ネガティブマージンを使うなら position: relative; を併記
http://cameme.net/ie6%E3%83%90%E3%82%B0/Article2459/
devicePixelRatioについて調べてみたAdd Star
http://d.hatena.ne.jp/ksrtmyk/20110522/1306038375
スマートフォンサイトを制作する際に便利なサイト
http://k-nagara.jimdo.com/%E3%81%8D%E3%81%96%E3%81%BF%E3%81%AE%E3%82%8A/web/
IEバグ？inline配置されたli内で背景画像位置がおかしくなる
inline要素化したli.list01に、先頭にアイコンが付くよう背景画像を設定していたのですが、IEだけそのアイコンがli.list01内で再度出現すると言うバグがありました。
こんな感じ↓
HTML構造とstyle設定は以下のようになっていました。
＜ul class=”listArea”＞
＜li class=”list01″＞＜a href=””＞あああ＜/a＞＜a href=”” class=”delete”＞＜img src=”delete01.gif” alt=”削除” /＞＜/a＞＜/li＞
＜li class=”list02″＞いいいいいい＜/li＞
＜/ul＞
ul.listArea li{
display:inline;
}ul.listArea li.iine{
margin-right:10px;
padding:0 0 0 15px;
background:url(icon01.gif) no-repeat 0 0;
}ul.listArea li.list01 a img{
margin-left:5px;
}
＜li class=”list01″＞＜/li＞内では＜a＞要素が2個入っていましたが、この2個目の＜a＞の裏側（削除ボタンdelete01.gifの位置）に、liの先頭に配置したはずのアイコンが再度出てきました。
もともとは、
ul.listArea li.list01 a img{
margin-left:3px;
}
を、
ul.listArea li.list01 a{
margin-left:3px;
}
にしていましたが、この時には今回の問題が出ませんでした。
セレクタを＜a＞ではなく＜img＞への指定に変更したことが問題だったのかというと、これに関連するバグというのが思い当らず、margin設定に問題があるようにも思えませんでした。でもmarginが0だと問題が解消されました。
次にliに指定しているdisplay:inlineに問題があるのではと疑いました。
ここで必殺技のzoom:1;を指定したところ、見事問題は解消されました。
ul.listArea li{
display:inline;
zoom:1;
}
しかし、納得がいきません。
このIEのバグの原因がイマイチわからないままですが、一番納得できる解消法として、li.list01内の2個目の＜a class=”delete”＞に対するセレクタに変更すると言うことで今回は対応しました。
ul.listArea li.list01 a.delete{
margin-left:3px;
}
これはやっぱりバグでしょうか、IEさん…
カテゴリー
- browser (22)
- Chrome (2)
- Fire Fox (12)
- Internet Explorer (13)
- webkit (1)
- css (8)
- design (1)
- History (5)
- html / xhtml (5)
- JavaScript (2)
- Links (1)
- memo (3)