css

IEでsvgの一部が表示されない場合

IE11でsvgをimgタグで表示した場合、画像の一部が表示されたりされなかったり、 ということがありました。

chromeやfirefox等のブラウザでは問題なく表示されていました。


http://www.h2.dion.ne.jp/~defghi/adjust.htm

こちらを参考に、以下のようにcssを修正したところ、表示はされるようになりました。


img[src$=".svg"] {
 position:relative;
 left:0.4px;
 top:0.4px;
}

table tr のborder

単純かもしれませんが、結構手間がかかりました。

①tableのtdにborder:dashedを入れると、tdの区切りがずれる

あああああ いいいいいいいいいい ううう
あああああ いいいい ううう


②trをdisplay:blockにしてtrにborder:dashedを入れると、tdの内容が足りない時に縦に揃わずずれる
あああああ いいいいいいいいいい ううう
あああああ いいいい ううう


③tableにborder-collapse:collapseを入れ、trにborder:dashedを入れる
あああああ いいいいいいいいいい ううう
あああああ いいいい ううう


これで解決しました。

dl,dt,ddの擬似テーブルで3pxのずれを直す方法

dtとddを横並びの擬似テーブルにする場合、IE6だと3pxのずれが生じます。
その場合、zoom: 1;などでhaslayoutをtrueにすれば解決していたのですが、今回はdtとddの下にボーダーを入れたかったので、この方法は使えませんでした。。。

そこでいろいろ調べたところ、こんな方法がありました。
Clearfixすごいですね!

==================================

こちらを参考にさせていただきました。

IE6 dl,dt,ddの擬似テーブルで3pxのずれを直す方法

横並びにしたリストを中央揃えにする

リストをfloatやdisplayで横並びにしたものを、ナビゲーション等でよく使用します。
display: inlineでも横並びになるのですが、li要素間の改行が入ると隙間があいてしまうのがいやなので自分は通常floatを使用しています。

floatを使用した場合

css
li {
  float: left;
  padding-right: 10px;
}
li a {
   background-color: #fff2cc;
}


表示サンプル


displayを使用した場合

css
li {
  display:inline;
  padding-right: 10px;
}
li a {
   background-color: #fff2cc;
}


表示サンプル


しかし、横並びにしたリストを中央揃えにしたい場合、floatのleftやrightでは実現できません。float: centerがあればいいのにな・・・

という時に、display: inline-blockを使用します。
しかし、inline-blockはIE7以下とFirefox2に対応していないため、プロパティを追加します。


display: inline-blockを使用した場合

css
ul {
   text-align: center;
}
li {
  display: -moz-inline-box;
  display: inline-block;
  /display: inline;
  /zoom: 1;
  padding-right: 10px;
}
li a {
  background-color: #fff2cc;
}


表示サンプル


/display: inline;と/zoom: 1;はIE7以下用、display: -moz-inline-box;はFirefox2用の記述になります。
※上記の表示サンプルは、ココログで投稿するとソースが自動的に書き換わってしまうため、IE7以下とFirefox2では横並びになっていません。しかしソースをそのまま使用すればきちんと横並び中央揃えに表示されると思います。

==================================

こちらを参考にさせていただきました。

横並びリストを中央寄せにする

floatを指定した際に親要素の高さが算出されない場合

floatを指定した際に親要素の高さが算出されない場合clearfixを使用したりしますが、
自分はなんとなくclearfixを使用しないで作成したいので、
そういう場合はfloat、display、overflowプロパティあたりで対応しています。

このプロパティを使用してもあっちのブラウザはOKだけどこっちのブラウザはダメだった・・・
ということが多々ありましたが、こちらにいろいろまとめてありました。
ありがとうございます!忘れないようにメモ。

==================================

こちらを参考にさせていただきました。

clearfixを使わないでやるには。

IE6でのmin-height

使う機会がたびたびあるのでメモ。

IE6ではmin-heightがきかないため、少々ハックする必要があります。

.sample {
  min-height: 100px;
  height: auto !important;
  height: 100px;
}


IE6では、
  • min-heightは無視される
  • 同一ブロック内の!importantは無視される
  • ボックスサイズが内容物に合わせた大きさへ強制的に調整される

というバグがあるため、コンテンツが100px以下の時は100pxで、100px以上の時はコンテンツにあわせて高さを拡張します。

==================================

こちらを参考にさせていただきました。

IE6のmin-width、min-heightハックに関して

IEでjpgにfilter:alpha(opacity)を使用した場合のドット抜け

javascriptでスライドショーを使用するのに、xfade2.js というのを使用していたんですが、jpg画像でIEのみ、白くドット抜けのような現象が起こりました。

jpgだから透過になっているわけでもないし、元画像を確認しても何もないし。。。IEのみなのでjsのfilterかな?と調べていた所、どうやら特定色(#02050a)のみドット抜けするという記述を見つけました。

IE6/7でjpgにfilter:alpha(opacity)をあてたときに出るバグ?

これ、ほんとにそのとおりで、jpgの#02050a部分が透過jpgになってるんです!
IE6~8でこのバグを確認しました。

背景色に#02050aを指定することで、とりあえず回避しました。

解決法としては、

  1. #02050aをなくす
  2. pngにする

等があげられるそうです。

==================================

他にもこちらを参考にさせていただきました。

続・IEの「White Noise」バグ

LightBoxのバグ

高さの異なるカラムを揃えるスタイルシート

2カラムや3カラムで背景色などが入っている場合、
片方が短かったりすると背景色が途中で途切れたりしてしまいます。

今まではjsで揃えていたのですが、あるシステムへ組み込みしなければならず、jsを使うのが大変そうだったので調べたところ、それを解決できる、高さの異なるカラムを揃えるCSSがありました!



[CSS]高さの異なるカラムを揃えるスタイルシート



それぞれのカラムに、同じ数値で、プラス値のpadding-bottomと、マイナス値のmargin-bottomを指定し、そのカラムを囲っているdivへ「overflow: hidden;」を指定するだけ。

これでばっちりできました!
IE、Firefox、Safari、Opera等で動作確認できました!

iframeのcss

iframeを使用する際、frameborder="0",scrolling="no"としたい場合、

<iframe src="xxx.html" frameborder="0",scrolling="no"></iframe>

とします。

これをcssで実現したい場合、

<iframe src="xxx.html"></iframe>


iframe {
border: 0;
overflow: hidden;
}

でFirefoxではうまく表示されました。

でもIEではだめなんですね。
おもいっきりボーダーやスクロールバーが表示されてました。
cssで実現できないタグがあるなんて…と驚きました。

CSS・JSファイルの外部読み込みにPHPを使う

html内に外部cssやjsを読み込む場合は通常このように記載すると思います。

<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js" type="text/javascript"></script>

普段はこれで問題ないのですが、今回cssやjs内でphpのスクリプトを入れるという状況になりました。
もちろんcssやjsにphpのスクリプトを記載しても動かないので、そのままファイルの拡張子を

style.css→style.php
script.js→script.php

とし、ファイル中にphpスクリプトを記載しました。

で、htmlから読み込むには

<link href="style.php" rel="stylesheet" type="text/css" />
<script src="script.php" type="text/javascript"></script>

とするだけ。

ただ、cssはそのままだときちんと読み込んでくれないので、style.phpに

<?php header('Content-Type: text/css; charset=utf-8'); ?>

と記述しておきます。

拡張子がcssやjsのファイルしか読み込めないと思っていたら、phpでも読み込めるんですね!
私には目からウロコだったので、忘れないうちにメモ。

==================================

こちらを参考にさせていただきました。

今日もガクリ('A`) CSS を PHP のヒアドキュメントとして

より以前の記事一覧

その他のカテゴリー