タグ

cssとinternetexplorerに関するkitsのブックマーク (30)

  • for 属性に対する属性セレクタの IE7 での挙動

    IE7 には、label 要素の for 属性に対する CSS の属性セレクタが無効になるバグがあります。 label[for="foo"] { background-color: yellow; } この場合 for="foo" という属性を持つ label 要素の背景が黄色になるはずですが、IE7 では無視されてしまいます。これはどうやら for というキーワードが DOM の予約語であることに由来するバグのようです (参考: Attribute Selector (CSS selector) - SitePoint CSS Reference)。そのかわり、IE7 では htmlFor という属性名を利用すればスタイルが有効になります。 label[htmlFor="foo"] { background-color: yellow; } ただこれだと IE8 以降やほかのブラウザが解

    for 属性に対する属性セレクタの IE7 での挙動
    kits
    kits 2012/02/23
    「そのかわり、IE7 では htmlFor という属性名を利用すればスタイルが有効になります」
  • IE8バグ?:a要素内に画像があってa要素に背景を指定した時に位置がずれる

    キャプチャ見てもらうと分かるようにIE8だけ極端に位置がおかしい。 IE8がリリースされてから、まだあんまりいじってないのでよく分かってないのですが、今組んでいるサイトをIE8でチェックしたら、「あれ?表示がおかしい...」って事に遭遇してしまったので、エントリー。 よくある感じで、リストのマーカー変わりに背景の指定をa要素にして、そのリスト内には画像テキストが入ってたんです。はい。 毎度のようにサンプルも用意してみました。 サンプルを見る 発生条件は調べた感じa要素内にimg要素があって、a要素にbackgroundプロパティの指定をした時に起こる感じです。 img要素にテキストが隣接してても同様でした。 サンプルみたいなデザインの場合、マーカー部分も一緒に切ってしまう事が多いから過去の案件は大丈夫だと思うけど・・・ 取りあえず、今回のサンプルに使ったソースは以下です。 <ul> <li

    IE8バグ?:a要素内に画像があってa要素に背景を指定した時に位置がずれる
  • Pinned Sites: Windows 7 Desktop Integration with Internet Explorer 9

    This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.

    Pinned Sites: Windows 7 Desktop Integration with Internet Explorer 9
  • CSSハック "IE8" 本当にやってくれますね、マイクロソフトさん! | 一期一会

    以前リリースが開始されたとご紹介した『IE8』。只今そのIE8に苦しめられています・・・。CSSを組み立てている最中にIE特有のバグが発生してしまうのです。これを回避するためにハックを掛けているのですが・・・上手くいきません(泣)。今日中に解決したいのですが、正直まだ何とも言えません。 マイクロソフト様 拝啓 新機能を色々とつけるのは良いのですが、まずはCSSをまともに読み取ってくれるように改善して頂けませんか? そして、起動させてもすぐにバグが発生して落ちてしまうような状態でリリースするのは辞めて頂けませんか? エラーを送信しても一向に改善されません。どうなっているのでしょうか? 敬具 ココでIE8を含むIEのCSSのバグのハックに私と同じく困っている方へ、使用するコードをお教え致します。 IE8 *+html>/**/body selector IE7 *:first-child+ht

    CSSハック "IE8" 本当にやってくれますね、マイクロソフトさん! | 一期一会
    kits
    kits 2009/04/10
    (CSSが追記されたが)何がどううまく行かないのだろう。
  • New year, new design | Stopdesign

    With a bit of humility and even a little nervousness, it’s time to take the wraps off a new design I’ve been working on for nearly a month. My hesitation comes not from revealing the new design, but from my… With a bit of humility and even a little nervousness, it’s time to take the wraps off a new design I’ve been working on for nearly a month. My hesitation comes not from revealing the new desig

    New year, new design | Stopdesign
    kits
    kits 2009/01/23
    "I dropped IE6." しかしIE6で見ても結構見易いスタイルになっていた。しんせつ。
  • リキッドデザイン問題は max-width と IE6 用 expression で解決 - eclucifer blog

    Date 2009-01-15 19:06 Category blog / Web 関連 Tags blog / CSS / JavaScript / push!! / tips / Web 関連 / Webデザイン / Web制作 / 考え方 Navigation Link Newer Older 使用中の Firefox アドオンまとめ  Comments / Trackbacks Comment Form Name URL Add Your Comment Trackback URL http://eclucifer.net/blog/web/2009011501.html/trackback/

  • IE 6とお付き合いをする5つの方法 - builder by ZDNet Japan

    Internet Explorer 6さんとお付き合いするのは難しいと、多くの方から聞きしました。それもそのはず、IE 6はやり手のお坊ちゃまです。Windowsという父親のおかげで恵まれた生活を続け、なみいるライバルは近づくことさえできずに、大企業の人たちやお年寄り、パソコン初心者の人たちに一目置かれる存在になりました。 だから、少し天狗になっているところもあるでしょう。自己啓発を怠けているところもあるかもしれません。わがままで自分勝手です。それでもうまく付き合っていかなければいけません。それが大人の社会というものです。 そこで、ここではそんなIE 6さんとのお付き合いのポイントを紹介してみましょう。 我慢強く IE 6と付き合うためには、我慢強い心が必要です。「W3Cの仕様に沿ったコーディングをした」などという理論は通用しません。当然のようにレイアウトを崩されることもあります。 先ほど

    IE 6とお付き合いをする5つの方法 - builder by ZDNet Japan
    kits
    kits 2008/12/19
    * html {} は別にCSS仕様から外れてはいない。
  • IE6ネタにいまいち乗り切れない件 | necoze LOG2 [ネコゼログログ]

    一定期間更新がないため広告を表示しています

    IE6ネタにいまいち乗り切れない件 | necoze LOG2 [ネコゼログログ]
  • http://twitter.com/hamashun/status/1058043789

    http://twitter.com/hamashun/status/1058043789
    kits
    kits 2008/12/15
    見れるなら気にしない人も多そう。
  • オレの名は「ジェイ・スクリプト」…… - in between days

    以下、郷田ほづみの声でお読みください。 オレの名は「ジェイ・スクリプト」。20世紀最末期の「第一次ブラウザ戦争」でエース部隊に徴用され、最前線で殺戮を繰り広げた。オレたちに課せられた課題は重大だった。相手方ブラウザの殲滅。オレたちはマイクロソフト帝国の最新鋭上陸艦「IE4」に搭載され、次から次へとコードを実行した。戦いは熾烈を極めた。オレたちはどんな汚いコードでも動いた。カーソルをクマさんに変える。アイコンを点滅させる。今日のお知らせをポップアップさせる。世界時計をスクロール表示させる。それが果たして当にそのウェブページに必要なユーザビリティなのかを問うこともなかった。しかしいつしかオレたちは気づいた。敵艦「NN4」に搭載されているのもオレたちとまったく同じスクリプトなのだと。やがてオレたちが属する帝国が領土のほぼ九割を制圧するに至り、戦争は膠着状態にはいった。敵国は壊滅されたかに見えた

    オレの名は「ジェイ・スクリプト」…… - in between days
    kits
    kits 2008/09/21
    「『ファウンデーション』の支援を受けた」って巧いなあ。
  • float方向のmarginが倍増するバグへの対応

    float方向のmarginが倍増するバグへの対応 IE6ではfloatしている要素にmarginを指定すると、float方向のmarginが倍近くに増加するというバグが存在します。 サンプル これに対応する為にはfloatを指定している要素に対して、display:inlineを適用します。 div#box{ float:left; margin:20px; display:inline; } サンプル これは、ボックスのdisplay値を変更すると言う意味ではありません。 CSSの仕様上、'float'が'none'以外の値を持つ要素のdisplayの値は強制的にblockに変換される為、この記述には全く意味がありません。 IE6に対してfloat方向のmarginが倍増するバグへの対応としてのみ活用できる記述になっています。 関連エントリー tableにおけるmarginの相殺 ma

    float方向のmarginが倍増するバグへの対応
    kits
    kits 2008/09/07
    IE6のfloat boxのmarginが倍になるやつは display:inline; で直る。
  • Microsoft Learn: Build skills that open doors in your career

    Microsoft Learn. Spark possibility. Build skills that open doors. See all you can do with documentation, hands-on training, and certifications to help you get the most from Microsoft products. Learn by doing Gain the skills you can apply to everyday situations through hands-on training personalized to your needs, at your own pace or with our global network of learning partners. Take training Find

    Microsoft Learn: Build skills that open doors in your career
    kits
    kits 2008/06/04
    IE8独自拡張の接頭辞は -ms かー。
  • めも - IT戦記

    このメモについて id:amachang の私的な学習目的 IE6 の標準モードに関するバグ いろいろとポイント layout IE6 の視覚整形モデルの中で要素は、大きく分けて layout を持つ要素と、 layout を持たない要素に分けることができる。 layout を持つ要素とは、自分のサイズや位置に責任を持つ要素である。 layout を持つ要素は、四角形の領域を作る。 layout を持たない要素は、直近の layout を持つ要素のサイズおよび位置と、そこの間にあるすべての要素の margin, padding, border によってその開始点、折り返し点が決まる。 layout を持たない要素は、四角形の領域を作らない。上下左右の間隔を保持しているだけに過ぎない。 layout を持たない要素間の上下マージン(相殺されるマージン)は二つの要素間の共有のもので、ある要素特

    めも - IT戦記
    kits
    kits 2008/05/29
    「IE6 の標準モードに関するバグ」すごいややこしそう。
  • 東京下町WEBクリエイターのおぼえがきBlog

    普段の業務ではがっつりコーディングすることが多い私です。 TOPページのトピックス部分を制作していたら、こんなトラブルに見舞われました。 [症状] liやdt・ddなどの、要素が複数縦ならびするページを制作時。 <img>の入った行だけ高さがずれる。 (IE6、IE7での検証時。Firefox2、safari3では問題なし) [修正方法] li { line-height: 1.8; layout-grid-line: 1.8; } layout-grid-line要素はIEのみに適用される行の高さを指定するスタイルで、 これにline-heightと同じ値を入れておけば、imgが入ってもズレません。 よく文頭・文末についている「New!」などのアイコンを入れるには便利だと思います。 line-heightを入れずにpaddingやmarginを設定する方法もありますが、それだと要素内が複

    kits
    kits 2008/05/26
    「layout-grid-line要素はIEのみに適用される行の高さを指定するスタイル」
  • 覚え書き@kazuhi.to: IE8の新しい標準モードをめぐるあれこれ

    IE8の新しい標準モードをめぐるあれこれ そろそろIE8の新しい標準モードとモードスイッチについて一言(ryの続き……を書きかけて、なかなか考えをうまくまとめられずにいたのだけど、そうこうするうち昨日A List Apartで公開された二つの記事「They Shoot Browsers, Don't They?」「Version Targeting: Threat or Menace?」がきっかけになって、再びWeb標準界隈(何処)が賑やかになってきた気がしたので、とりあえず現時点での私見を書いておこうかなと。全然、まとまってないですが。 一定のニーズがある以上、バージョンターゲティングという考え方なり実装には異を唱えないけれど、標準モードのレンダリング能力を(meta要素なりHTTPヘッダで別途指定したりしない限り)IE7相当とする案に、僕は反対します。仕様通りの解釈に基づく表示を意図し

  • IE8の標準準拠度が本当に高いなら (agenda)

    たとえば、アンダースコアハックがあります。IE6の標準モードではアンダースコアハックを利用することができたため、IE6用の対策として広く使われていました。ところがIE7の標準モードではアンダースコアハックが利用できなくなったため、アンダースコアハックに依存した標準モードのページでレイアウトが崩れるなどの不具合が起こってしまったのです。 似たようなことがIE8でも起こるとの懸念があることから、「どの標準モード’をターゲットとしているか」を明示する必要があるのではないかと考えられているのです。IE6やIE7は今後数年も大きなシェアを持ち続けると予想されるため、標準準拠度の高いIE8と、そうではないIE6、IE7を同じ DOCTYPEスイッチで区別するのは、互換性の確保という問題から現実的な解決策ではないのです。 IE8の新しい標準モードとモードスイッチ | Web標準Blog | ミツエーリン

    kits
    kits 2008/02/07
    「『IE8』とやらがきっちり標準に準拠しているのだとすれば、同じ原因で"レイアウトが崩れ"ることはないはず」確かに。
  • IE6のCSSバグを視覚的にチェック

    てんぽ: IE6のCSSバグを視覚的にチェック CSSHTML、FC2ブログのカスタマイズ、共有テンプレートなど IE用Acidテストとも言えるCSSバグのチェックページを作ってみました。 IE6で表示するとすべてのチェック項目で「NG」と表示されますが、正しい表示を行うブラウザなら「OK」と表示されるはずです。 IEtest (beta) 具体的にはどうやっているかというと、たとえば「position: absoluteが指定されたボックスの幅をパーセントで指定したとき、 幅の参照先を、そのボックスの包含ブロックではなく、間近の親要素にしてしまうバグ」をチェックするコードは以下のようになっています。 <div class="container"> <div class="div1"> <div class="div2"></div> </div> </div> .container {

  • IE7でHTMLに存在しない要素にスタイルシートを適用する方法: ある SE のつぶやき

    AjaxianとHTML5.JPでIE7以降で、HTML5の新要素にスタイルシートを適用する方法が紹介されていました。 Ajaxian » Getting HTML 5 styles in IE 7+  HTML5の新要素にCSSを適用するテクニック - HTML5.JP ですが、この方法はどんな要素にも適用できるようです。 例えば、以下のようなHTMLがあったとします。 <html> <head> <style> dummy { color:red; font-size:2em;} </style> </head> <body> <dummy>ここは&lt;dummy&gt;要素です。</dummy> </body> </html> このHTMLは、IE7では以下のように表示されます。 FireFox2.0だとこうなります。 Opera9.24だとこうなります。 IE7だけスタイルシート

  • IE8の新しい標準モードとモードスイッチ | Web標準Blog | ミツエーリンクス

    先月、MicrosoftのIE Teamが発表したIE8がAcid2テストに合格するという話題は、大きな衝撃を与えました。 しかし発表からしばらくして、より標準準拠に近づいたレンダリングをIE8で行うには、DOCTYPEスイッチのようにHTML文書に何らかの「ヒント」を与える必要があるとの情報も流れていました(「IE8 passes Acid2」)。そして先ほど、その詳細とまた経緯が明らかになりました。 A List Apartの「Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8」という記事によると、新しい「ヒント」は次のようなものになると紹介されています。 meta要素を記述し、対象としているIEのバージョンを指定する。 <meta http-equiv="X-UA-Compatible" content="IE=

    kits
    kits 2008/01/23
    紹介に感謝。/ (IE6-8を)「同じDOCTYPEスイッチで区別するのは、互換性の確保という問題から、現実的な解決策ではないのです」ここをどうするかなのだろうなあ
  • リゾレーヌ サプリを口コミだけで判断してはダメ?バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します!

    リゾレーヌ サプリを口コミだけで判断してはダメ?バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します!
    kits
    kits 2008/01/11
    「margin、border、float、tableの解釈など、もともとIE6がこけるべくしてこけていたところで、同じようにこけている」