[B! cssハック] magohatのブックマーク

Ｗｅｂデザイナーへの挑戦　 IEで画像の上下に隙間ができる。

IEで、画像を表示(imgタグ使用）したときに、原因不明の隙間ができる。これは、有名なＩＥのバグ？である。回避策としては、ＣＳＳにvertical-align:bottomを記述するとよいとあるが、それでも回避できないことがある。そのようなときは、以下の方法で回避できる。ＣＳＳ上 .ie_yokaku_can { margin: 0px; border: 0px; padding: 0px; font-size: 0px; } html上 <p class="ie_yokaku_can"><img src="../images/gra_kyoko_kado_top.png" width="317" height="15"></p> 余白をなくしたいimgタグをpタグで囲むようにする。ただし、この方法はpタグの間に文字があるときは、使用できないので注意すること。そのほか、画像

magohat 2013/03/05

リンク

3/3 CSSの両端揃え(均等割り付け)で行の右端も揃える方法 [ホームページ作成] All About

CSSの両端揃え(均等割り付け)で行の右端も揃える方法(3ページ目)HTMLに記述したテキストをCSSで両端揃え(均等割り付け)にする方法を解説。行揃え方法を指定するtext-alignプロパティに、両端揃えを示す値「justify」を指定するだけで、各行の左端だけではなく右端もきれいに揃えられます。ただし、IEとEdgeではtext-justifyプロパティを併用する必要があります。 IEやEdgeでも両端揃え(均等割り付け)にできるtext-justifyプロパティ前のページでご紹介したように、IEやEdgeで表示する場合、日本語などの「空白文字で単語を区切らない言語」ではtext-alignプロパティに値「justify」を指定するだけでは両端揃え(均等割り付け)になりません。日本語文字だけしかない行も含めて全行を両端揃えにするには、さらにtext-justifyプロパティを併記し

magohat 2012/09/11

リンク

CSSハック一覧

2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h

magohat 2010/12/10

リンク

CSS適用前のIEのスタイル情報をまとめた『IE CSS』 | 100SHIKI

資料として便利そうなのでエントリー。 IE CSSはスタイルシート適用前にInternet Explorerがそれぞれの要素にどんなスタイルをあてているかをまとめたサイトだ。しかも丁寧に、IE6、IE7、IE8、IE9毎にまとめてくれている。実際にはCSSをリセットしてからサイトを作る人も多いかと思うが、IEは昔から広く使われていたので、いわゆる「標準的なインターネットっぽいスタイル」を知りたいときに便利かもしれないですな。デザイナーさんやWebサービスを作る人は知っておいていいかもですね。

magohat 2010/04/02

リンク

わずか四文字でIE6/7/8を区別するCSSハック | コリス

「\」「9」「*」「_」の四文字だけで、IE6, IE7, IE8を区別するCSSハックをNettuts+から紹介します。 <textarea name="code" class="css" cols="60" rows="5"> body { color: red; /* all browsers, of course */ color : green\9; /* IE8 and below */ } </textarea>

magohat 2010/04/02

リンク

[CSS]主要ブラウザの特定ブラウザのみに有効なCSSハック集

Internet Explorer、Firefox、Safari、Chrome、Operaなど主要ブラウザの中の特定ブラウザのみに有効なCSSハックをbradKELLETTから紹介します。 Documenting the Hacks: CSS Browser Targeting CSSハックは使用しないに越したことはありませんが、必要がある場合には最小限簡潔に記述しておくようにします。各ブラウザの新しいバージョンがリリースされた際、これらのハックが無意味なものになることも念頭においてください。 Internet Explorer 6 IE6のみに適用します。 <textarea name="code" class="css" cols="60" rows="5"> #selector { _property: value; } </textarea>