2014年03月22日

IE8でopacityが効かない時の対処法

マウスを上に乗っけると半透明にしてくれる「opacity」。マウスを乗っけた感がわかりやすく簡単にオシャレな感じになるため色んな場面で多用しますが、IE8において「アレ?」と思った事があったので忘れないように書いておきます。

2014年現在、未だ検証対象に入っているIE8。IE6の時代ほどではないものの、IE8もコーダーにとっては未だり曲者だったりします。今回は「IE8でopacityが効かない時の対処法」です。続きを読む
posted by Liang Zhaohong at 10:38 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2013年04月21日

二行目以降を行頭1文字分インデントさせるCSS指定

行頭に黒丸や数字を表示させ、二行目以降を1文字分インデントさせるには、list-styleとmarginやpaddingなんかを使えば簡単にできますね。ただ、その行頭の1文字が米印だったりすると、どのように表現されますでしょうか?

【表示例】

※米印の例はこんな場合です米印の例はこんな場合です米印の例はこんな場合です米印の例はこんな場合です米印の例はこんな場合です米印の例はこんな場合です米印の例はこんな場合です


これまではこのような場合、list-styleに無い記号等による場合は背景画像として作成していたのですが、下記のようなCSSの書き方で再現できる事を最近ようやく知りました。

li{
padding-left:1em;
text-indent:-1em;
}

例としてliに指定していますが、もちろんdivやpにも効きますので、汎用的に使える便利なCSSでした。
posted by Liang Zhaohong at 13:00 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2013年04月03日

checkboxとテキストがずれてしまう時の対応

フォームでよく使用する、下記のような表現があります。

チェックボックス
<input type="checkbox">チェックボックス

このcheckboxと、横のチェックボックスの縦位置が、変にずれてしまう事があります。そんな時はCSSで下記のように記述する事で、キレイに横並びになってくれます。

input{
vertical-align: 0;
}

posted by Liang Zhaohong at 16:00 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2013年03月27日

opacityで困った時の対処法

ここしばらくCSSで頭を抱える事が多い。。今回はopacityで困った時の対処法です。

続きを読む
posted by Liang Zhaohong at 23:46 | Comment(2) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2013年03月24日

IE7で困った時のCSS対応策

IE6は検証対象から外れつつある今日この頃ですが、IE7は未だ健在。そしてこのIE7も、気を抜いていると思わぬ落とし穴があるブラウザです。今回は実例二つとそれぞれ解決できた方法を書いていきます。

◆IE7でoverflow:hiddenが効かない
ボックスからはみ出た部分を隠してくれる「overflow:hidden」。よく使うのですが、ある時この overflow:hidden が効かず、中の要素が思いっきり飛び出してしまう現象が発生。単純な落とし穴ほど深くハマり、なかなか脱出できなかったのですが、この「overflow:hidden」を指定している要素に下記指定を追加する事で解決できました。

position: relative;

なんで解決できたのか?と問われると「???」な感じですが、解決できているので取り合えずOKという事で。

◆paddingが指定値の倍くらいに
padding を使わない日は無いといっても過言ではない padding ですが、IE7だけ妙に余白が広くなってしまう事がよくあります。細かく調査したわけではないので発生する原因が不明なのですが、padding を指定している要素に下記を追加してあげれば解決できる事が多いです。

border: 1px solid #fff;

サイズや色は状況に応じて変更すれば大丈夫です。これも何で解決できたかは謎です。


IE7でお困りの方のお役に立てばうれしいところです。
posted by Liang Zhaohong at 13:55 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。