IE7からのCSSの小難しいセレクタやプロパティいろいろ
チャイルドセレクタや隣接セレクタなど、あんまり馴染みのないちょっと小難しい CSS のセレクタなどをまとめてみました。 これからクロスブラウザの照準を、IE7 に合わせるなら、ちょっとお役立ちかもです！ そろそろ IE6 のことは忘れて、IE7 からのクロスブラウザを目指せばいいのかなーという気がしています。CSS のプラパティーの中には、今まで IE6 のことを考えて使わなかったものがたくさんあったりします。それらを改めて確認してみると、コーディングの幅が広がるなーという気になったりもします。 これから使う事が増えるかもしれない、CSS のセレクタやプロパティを、もう一度振り返ってみると同時に、IE7 で注意したい事などを簡単にまとめてみました。 IE6 ではサポートされていませんでしたが、IE7 からは使ってもOKなセレクタやプロパティには、どんなものがあるのか確認してみます。後半は
IE7 が死んだらできるいくつかのこと（ caniuse.com から見繕っただけ） - oogatta のブログ
IE6 への対応が一段落した昨今、 IE7 もいよいよ事実上市場から姿を消す日が近づいてきたようです。flickr が今年以降リリースする新機能にて IE7 をサポートしないことを表明しました。私の勤務先でも、今ものすごい勢いで IE7 のシェアが低下しており、今年の夏から冬にかけて、今の IE6 と同じくらいのシェアになるかもしれない勢いです。 というわけで、 IE の最低動作保証バージョンが 7 から 8 になったら何ができるようになるのか、僕らの caniuse.com を見てざっと洗い出してみましたのでご参照ください。 CSS inline-block display:inline-block が使えます。IE 6/7 では "display:inline; zoom:1;" で代用していたと思います。 Table Display display:table 、 display:t
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナル
Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。 IE7.jsは基本的にMSIE5/6向けに用意されていたライブラリをIE7に対応させたもの。これまでのモジュール構造は廃止され、IE7.jsやIE8.jsといったように個別のファイルに分離されている。ホスティング先もGoogle Codeへ変更された。IE7.jsはサイズも縮小され、圧縮した状態で11KBほど。またbase2.DOMのセレクタエンジンを使うことでより高速に動
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
ボックスの終端を示すコメント | securecat's exblog
覚え書き@kazuhi.to: links for 2007-04-20経由でIE7 の隣接セレクタで気が付いたこと | WWW WATCHよりどうやら、隣接セレクタの判断時に、コメントをカウントしてしまっているようで、、これって IE7 のバグ？バグなのでしょうが、なんというか、ボックス等の終端を示すためのコメントは、 </div><!-- /end --> ではなく <!-- /end --></div> というように、終了タグの寸前に書くのがもはや慣例というか通例というかになっている……という、あくまで個人的な感覚ですけども、まあ、そんなわけなので、僕の身の回りでいえば、結果的にはそのバグを回避できているというのが現状なのだろうなぁとか何とか、朦朧としながら思いました[謎]。 む、朦朧としていると「朦朧」が読みづらいな[謎]。
IE7 の隣接セレクタで気が付いたこと
「画像の使用を（略）CSS大会」 に応募した自分の作品を、IE7 で見てみたんですが、なぜか隣接セレクタ （E + F） がまったく適用されていないのに気がつき... 「画像の使用を（略）CSS大会」 に応募した自分の作品を、IE7 で見てみたんですが、なぜか隣接セレクタ （E + F） がまったく適用されていないのに気がつきました。 IE7 は隣接セレクタに対応してるはずなのでおかしいな、なんか自分の書き方がおかしいのかな？なんて思って、手元にある CSS をいじったりしてみたのですがまったく効果なし。何でだろうと思って HTML 文書の方を見て、何気なくソース内のコメントを削除してみたら...... 普通に適用されてる...... orz 該当する HTML ソースは下記の通り。 <div id="navigation"> <h2>Contents</h2> ...中略... </di
【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 | クリエイティブ | マイコミジャーナル
Copyright (C) Mainichi Communications Inc. All rights reserved. 掲載記事の無断転載を禁じます
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (23) 08-01 ブロック要素化による問題 | クリエイティブ | マイコミジャーナル
リストコンテンツをブロック要素化すると余白が挿入される問題[未修正] IEでは、リスト内のインライン要素をブロック要素化すると、リストの各項目の下に余白が挿入されるという問題が発生する。 サンプルソース8-1-0では、リストのコンテンツとしてリンクを記述している。リンク部分には背景色などのデザインを指定しているが、<a>で構成されるのはインライン要素であるため、そのままでは文字の部分だけがリンクとして機能する。この段階では、リストの各項目の下に余白はなく、すべての項目がくっついて表示される。 図8-1-0a:IE6での表示 図8-1-0b:IE7 beta2での表示 図8-1-0c:Firefoxでの表示 サンプルソース8-1-0 a {background-color:cyan; padding: 5px; color: black; text-decoration:none
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (14) 04-04 テーブルとキャプションのマージンの問題[未修正] | クリエイティブ | マイコミジャーナル
キャプションに余白が指定できないIE これまでのIEでは、テーブルのキャプションにmarginを指定しても余白が挿入されないという問題が見られた。この問題は、IE7 beta2でも修正されていない。 サンプルソース4-4-1では、テーブルを構成する<table>に対してborderプロパティを指定し、表の周囲を青い罫線で囲むように指定している。また、表には<caption>でキャプションを追加し、background-colorプロパティで背景色を黄色に、marginプロパティで余白サイズを50ピクセルに指定している。 しかし、IE6やIE7 beta2で表示すると、キャプションのまわりに50ピクセルの余白は挿入されていないことがわかる。同じソースをFirefoxで表示すると、キャプションのまわりに50ピクセルの余白が挿入される。 図4-4-1a:IE6での表示 図4-4-1b:IE7 b
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (11) 04-01 横幅や高さの指定で上下マージンの処理が変わる問題[未修正] | クリエイティブ | マイコミジャーナル
CSSの標準規格での子要素と親要素の上下マージンの扱い CSSの標準規格では、親要素に罫線またはパディングが指定されている場合、子要素と親要素の上下マージンは相殺されないことになっている。たとえば、サンプルソース4-1-0では、<div>の中に<p>でマークアップした文章を記述した。これを2つ記述し、<div>に赤い罫線とピンクの背景色、<p>にオレンジの罫線と黄色い背景色を指定している。IEやFirefoxなどのブラウザでは、デフォルトスタイルシートで<div>には0、<p>には約1.33emの上下マージンが挿入されるため、<div>と<p>の上下マージンの相殺を考えなければならない。しかし、サンプルソース4-1-0のように、親要素<div>に罫線を指定している場合、標準規格に従うと相殺は生じないことになる。 これをIEとFirefoxで表示すると、図4-1-0a〜4-1-0cのようにな
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (8) 03-03 置換要素を含む行の高さが変わる問題を修正 | クリエイティブ | マイコミジャーナル
これまでのIEでは画像などの置換要素を含む行で、ブロック要素に対して指定したline-heightプロパティの値が無視され、行の高さが変わるという問題が発生していた。この問題は、インライン要素や置換要素の高さよりもline-heightプロパティの値を大きく指定した場合に発生する。 ブロック要素に適用したline-heightプロパティは、インライン要素の高さの最小値を指定するものとされている。そのため、内包するインライン要素や置換要素の高さがline-heightの値よりも小さい場合、インライン要素の高さはline-heightで指定した値で処理されなければならない。 サンプルソース3-3-1では、<p>に対してline-heightプロパティを60ピクセルに指定している。また、文章の中には小さな画像(image.png)を挿入した。このソースを表示すると、IE6では画像を含む行の高さが
hxxk.jp - IE 7 と color: inherit
IE 7 と color: inherit http://hxxk.jp/2006/11/19/2347 前の記事 : カラダ語り 2006 次の記事 : 仕様をちゃんと理解しておくか、英文をしっかりと読むことで誤解を防ぐ 記事データ 投稿者 望月真琴 投稿日時 2006-11-19T23:47+09:00 タグ CSS hxxk IE IRC スクリーンショット 仕様 実践 Web Standards Design 概要 CSS2 が勧告されて 8 年半が経っていますが、 IE 7 はまだ CSS1 にこそ準拠していても、 CSS2 には準拠していません。よって、 color プロパティに対して inherit 値を指定しても有効となりません。 リプライ リプライはまだありません。 IE だと pre 要素内のテキストの文字色がおかしい ? これまで検証していなかったのかよ、と言われてし
IE7でページが表示されない件について : とあるWEBクリエイターのblog
先日日本語版がリリースされたIE7だが重大なバグの方が修正されていない。 特定のページがごくまれに表示されない。 特定のページの一部分がまれに表示されない。 というものである。 リロードを行うと正しく表示されるし、ソースの表示を行うと正しく表示されていることかブラウザの問題と思われます。 事実IE6では問題なく表示されます。 これをWEBサイト上から回避するにはいくつかの方法があります Content-Style-Typeを正しく記述する。 head要素内にhttp-equiv属性でスタイルにCSSを指定することにより回避されることがあります。 <meta http-equiv="Content-Style-Type" content="text/css" /> これはレンダリングエンジン(ブラウザ)などにスタイルシートを使用していることを明示的に指定するものです。 ブラウザサイドでキャッ
IE7 の CSS レンダリングを検証
IE7 の日本語版もリリースされ、ぼちぼち使い始める人たちも増えてきそうな今日この頃。 IE7 からは今まで Firefox 等に比べて遅れていた CSS への対応も進み、サイト制作者にとってはうれしい限りなのですが、実際 IE7 のCSS レンダリングはいかがなものか、簡単に検証してみました。 今回検証したのは、IE7 におけるボックスモデルの取り扱いと、セレクタへの対応状況。 まずはボックスモデルの検証ですが、用意したのは下記の XHTML と CSS。 <ul> <li class="first_list">First element of list</li> <li class="second_list">Second element of list is a bit longer to illustrate wrapping.</li> </ul> ul { margin:0;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
http://hpbuilder.net/weblog/2007/08/06203819.html
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (18) 05-04 回り込みの問題[未修正] | クリエイティブ | マイコミジャーナル
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (7) 03-02 インライン要素の罫線や余白が切れる問題[未修正] | クリエイティブ | マイコミジャーナル
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (6) 03-01 文字より小さな高さ指定に対応 | クリエイティブ | マイコミジャーナル