IE8で border: hidden にした時、勝手に黒い線が出るバグ

通常、テーブルの線を隠すときは border: none を使いますが
hidden を使っても良いようです。
ただ、IE8において、table、tr、th、td、
全ての要素に指定しているにも関わらず
1px幅の黒い線が左右に出現しました。

ここしばらく古いIEに携わっていなかったのですが、
IE6などは、

#hoge table,tr,th,td {
    border: none;
}

としても、有効にならないことが多いです。
面倒ですが、ひとつずつ指定しないと有効になりません。
hidden だとこれでもダメだったので、none に戻しました。

#hoge table {
    border: none;
}

#hoge tr {
    border: none;
}

#hoge td {
    border: none;
}

#hoge th {
    border: none;
}

これで、有効になり、正体不明の黒い線は消えました。
WindowsXPのサポートが切れて今月で3ヶ月目。
まだIE6~IE8に対応する必要があるのもどうかとは思いますが、
現実はまだまだ、2年先まで移行ができない企業もあるようです。
コーダーのみなさん、頑張りましょう…。

レスポンシブレイアウトデザインのためのCSSテンプレート

よく使いそうなので備忘録としてまとめます。
最初に小さい画面から設定するのがコツです。


/* スマホ用①  幅320px */


/* スマホ用② */
@media only screen and (min-width: 480px) {
   
}

/* タブレット用 */
@media only screen and (min-width: 768px) {

}

/* デスクトップ */
@media only screen and (min-width: 960px) {

}

IE6・7・8で使えるIE用のFirebug

ホームページの解析に欠かせない Firebug。
IE8からは開発者ツールが備わっていますが、Firefox派だと
使い慣れた Firebug の方がいいでしょう。

機能はFirefox版ほど充実しているわけではありませんが、
IE6、7でも動くということなので重宝しそうです。
2014年4月にはXPのサポートが切れますので、
そろそろお役ごめんとは思うのですが…・

http://getfirebug.com/firebuglite

「 Firebug Lite debug 」を右クリックして、お気に入りに追加します。
あとは使いたいページを表示して、お気に入りから開くと、
見慣れたFirebugの画面が開きます。
「Inspect」というボタンを押すと、要素をマウスオーバーで選択できるようになります。

構文チェックサービスのまとめ

By: Robert Agthe

Eclipse のようなIDEの良いところは、構文チェッカが付いていて
間違いがあれば、その場で表示されることだと思います。
エディタでは、構文チェッカがほとんどありません。

色々調べると、Notepad++ では、PHPの実行ファイルを使うことで
構文チェックができます。PHPエディタでも同じことができるので、他のエディタでも
可能かも知れません。

他に、CSS、JavaScript、HTMLなど、よく使いそうな構文チェックサービスを
まとめてみました。これだけあるので、ネットがつながっていればエディタでも
そうそう品質を落とすことはないのでは?と思います。
チェックを面倒くさがらなければ、の話ではありますが。

■ PHPの構文チェック (Notepad++ でショートカットキーで確認する方法)
http://tm.root-n.com/programming:php:etc:find_php_lint_on_notepad_pp
一度使うと手放せません。

■ CSS構文チェック
http://jigsaw.w3.org/css-validator/#validate_by_input

■ CSS整形ツール
http://cssbeautify.com/

■ HTML構文チェック
http://validator.w3.org/#validate_by_input

■ RSSとAtomのチェック
http://validator.w3.org/feed/#validate_by_input

■ JavaScriptの構文チェック
JSHint
http://jshint.com/

■ アクセシビリティ
http://www.infoaxia.com/tools/index.html
Web Accessibility Toolbar

IE8以下でもCSS3の一部機能を使える「PIE.htc」の落とし穴と解決法

結論から言うと、
「角丸、グラデーション、ドロップシャドゥとエフェクトを
重ねると効かない」ということらしいです。

CSS3はブラウザによって書き方が異なるので、
ウェブサービスのジェネレイターを使ったり、
エディタのプラグインとしてEmmetを使うことが多いです。

「CSS3プロパティジェネレーター」

たいてい、ジェネレイターは一括でドロップシャドゥや
角丸の設定が行えるので、CSS3だけでボタンを作るといった
作業に、とても便利です。
そこでソースを生成して、貼り付けると、IEだけ見えません…。

IE6~8にも、ドロップシャドゥ、グラデーション、角丸の
プロパティを有効にすることで有名な「PIE.htc」を使って、
該当のプロパティの最後に追加してもダメでした。

こういう時は、「極限まで小さく作って試す」というのを
経験上のセオリーとしていたので、
「角丸」だけ試してみようと思ったところ…。
下記のコードできちんと動きました。

.box {
    width: 120px;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    zoom: 1;
    behavior: url("/PIE.htc");
}

一気にグラデーション、角丸、ドロップシャドゥなどと
設定するのは、どういう訳か、無理があるようです
(ちなみに、試したのはIE8です)。

昔からちょくちょく使いたくなって、そのたびに
壁にぶつかっていたのですが、ようやく解決法が見つかりました。

最後に、分かりやすいマニュアルでいつもお世話になっている
西村 文宏さんの記事をご紹介します。
これから使おうと思っている方にオススメです。


「IE6~8でも一部のCSS3が使える!「CSS3 PIE」の使い方」