タグ

バグに関するmooiboomのブックマーク (25)

  • [CSS]スタイルシートを自動でIE6対応にするオンラインサービス -ie6fixer

    手元のスタイルシートをフロートやネガティブマージンなどIE6のバグを回避する記述を自動生成するオンラインサービス「ie6fixer」を紹介します。 ie6fixer IE6に対応したスタイルシートを生成する方法は、以下の手順です。 「master stylesheet」の欄に、スタイルシートを入力。 「Give me my ie6 fixes」ボタンをクリック。 以上で、IE6のバグに対応したスタイルシートが生成。 IE6のバグに対応している箇所は、現在のところ下記の通りです。 「min-height」は、「height」に変更。 「float」は、「display:inline;」を追加。 「position:relative;」は、「zoom:1;」を追加。 ネガティブマージンは、「position:relative; zoom:1;」を追加。 「overflow:hidden;」は、

  • CSSレイアウトの定石 WinIE6バグ回避法

    CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました(つまり回避法を用いない場合にどんなバグが発現するか)。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう (ブロックレベル要素を内包するボックスにはpaddingを指定しない。) 左右ボーダーとパディングを設

  • [CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス

    CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>

  • リアルな資産運用の結果をお見せします。海外投資が調子良い!

    「私のリアルな海外投資の結果をお見せします」を運営している管理者です。お越しいただきありがとうございます。 投資全般が好きな私は国内株式や海外への不動産投資や株式・定期口座など多くの投資をしています。 情報収集で多くの投資ブログを閲覧していますが、圧倒的に「投資に失敗している人」が海外投資を批判する内容の記事が多いことに驚きました。 海外投資に失敗している方の特徴はどれも中間業者の選定に間違いがあると感じています。そう海外投資には必ず資産を運用する会社があってこの運用会社の投資の腕にかかってるのです。この選定さえきちんとすれば確実に海外投資はよい結果が期待できます。投資なのでリスクは必ずありますがそのリスクを極力少なくする私の経験を交えて情報を配信したいと思います このサイトは「将来の日は大丈夫だろうか?」「国家破たんもあるの?」「日に資産を置いても全然増えない!」でも海外投資は怖いし

    リアルな資産運用の結果をお見せします。海外投資が調子良い!
  • Using CSS to Fix Anything: 20+ Common Bugs and Fixes - noupe

    Without a doubt, a logical and structured layout is the best way to go. Not only because your layout varies between browsers, but also because CSS has a lot of ways to position every element you have. Today we wanted to share with you some quick tips on how to avoid easy pitfalls when creating your CSS layout. This is the first part in this series as there are SO MANY good tricks out there and if

    Using CSS to Fix Anything: 20+ Common Bugs and Fixes - noupe
    mooiboom
    mooiboom 2008/06/17
    英語だけど見ればわかる。勉強になる。
  • http://spreadsheets.google.com/pub?key=prvB_MFPHuEHOYL7ulKmYOQ&output=html

    mooiboom
    mooiboom 2008/05/28
    CSSハックまとめの表。助かります。
  • IEで指定どおりのfont-sizeにならない | d-spica

    IEで指定どおりのfont-sizeにならない 2008-05-18 0 0 XHTML/CSS CSS, font-size IE との兼ね合いで,font-size は%で指定しておくのが,いちばん無難だと思うのですが,IE6, 7 にちょっと痛いバグがありました。 小さなサイズの文字が指定どおりの大きさにならないのです。 11px以下のフォントが指定より大きくなる まず,font-size のページを IE6 または IE7 でご覧ください。 順にフォントサイズが小さくなっていくはずなのですが,74%から72%あたりの日語のフォントサイズが一旦大きくなっています。その後71%から 60%のところまで,日フォントはサイズが変わっていません。 FIrefox の場合と比べると,よく分かるかもしれません。 %で指定された font-size は,最終的にpxに変換され,端数処理して整

  • IE 8では、hasLayoutプロパティがなくなる

    先日、Acid2 testをクリアしたIE 8ですが、IEのCSSでの不具合の原因でもあるhasLayoutプロパティがなくなるそうです。 Infamous IE hasLayout is toast Internet Explorer 8 and Acid2: A Milestone Acid2 testとは、CSS 2.1のレンダリングテストのことで、これにクリアしたので、hasLayoutはなくなったのかな、と思っていたのですが、どうもそのようです。 hasLayoutは、IEのCSSのレンダリングの不具合の根源といってもいいくらいのもので、これはかなり吉報だと思います。 これにより、hasLayoutプロパティ対策を「IE」だけの分岐で処理している場合は、今後注意が必要になりそうです。 参考: IEでのCSSのバグを回避するhasLayout

    IE 8では、hasLayoutプロパティがなくなる
  • IE7のCSSバグとOpera CSS Hack | F+R (FplusR)

    少し時間があったので、Windows Internet Explorer 7のCSSバグを検証してみた。 IE7 を含むモダンブラウザ向けの CSS ハックまとめにうまくまとまっているが、いくつか誤りもあり、新しいCSSハックも発掘したので少し書いておきたい。 検証したのは、Window Internet ExplorerのV6/V7、Firefox 1.5、OperaのV8/V9、Safari 1.3 です。今回はサンプルを用意しないので自分で確かめてほしいのと、複雑な属性セレクタを使ったものは難しい人もいると思うのでシンプルなものに限定してみた。 また、W3C CSS validator でValidなもののみに限定しています。 Internet Explorer 7のハック 「*+html hack」(*+html bodyのハック)は、じつはOpera 8.0 以降にも適用され

  • CSS ハックまとめ Lucky bag::blog: IE7 を含むモダンブラウザ向け

    Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ(Safari、Opera、Firefox) ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ

  • IEでのCSSのバグを回避するhasLayout | コリス

    IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値(read-only) false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ

  • IE6でよく遭遇するCSSのバグとその解決方法 | コリス

    Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する3つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが2倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが2倍になってしまうバグ IE6で、フロートした要素のマージンが2倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p

    IE6でよく遭遇するCSSのバグとその解決方法 | コリス
  • FireworksCS3の重大な欠点 - GP通信annex

    まあ、Adobeのサイトにものってるんですが、 404 error page 404 error page ユーザサイドから言わせていただくと、どう見てもバグです当にありがとうございました。 バグの再現フロー まずPhotoshop CS3で画像を作成します。 レイヤー効果で例えばドロップシャドウをかける psd形式で保存(互換性を優先する、でもしないでもどちらでもおk) そんで、Fireworks CS3でこのPSDファイルを開く。 さっき作成した画像をクリックし、Photoshopライブエフェクトが適用されている事を確認 そのまま、Fireworks PNG形式で保存しFireworksを終了 で、さっきのPNGファイルをダブルクリックしてFireworks CS3を起動させると・・・! ・・・さようなら。 ちなみに、Fireworksを起動してから当該ファイルをオープンしようとして

    FireworksCS3の重大な欠点 - GP通信annex
    mooiboom
    mooiboom 2007/11/22
    CS3じゃないけど、参考まで。
  • リゾレーヌ サプリを口コミだけで判断してはダメ?バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します!

    リゾレーヌ サプリを口コミだけで判断してはダメ?バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します!
    mooiboom
    mooiboom 2007/10/15
    IEのwidthに関するバグに対処したテンプレ。参考にする。
  • RedLine Magazine : IE7のフォント絡みでこんな話があった

    IE7のフォント絡みでこんな話があった Twitter経由でこんなCSSフォントサイズに関するバグを教えて頂きました。(バグと呼ぶのか、仕様と呼ぶのかは分かりませんが)発端はfloralさんのこの発言。 IE7で検証した?http://redline.hippy.jp/lab/css/bodyfontsize625.php 以前このブログで書いたこの記事。 >>RedLine Magazine : bodyにfont-size:62.5%を指定すると・・・ 内容はbodyに対してfont-size: 62.5%を予め指定しておくと、フォントサイズをemで指定する際、12ピクセル相当なら1.2em、16ピクセルにしたいなら1.6emという風にemを使ったフォントサイズ指定が分かりやすくなるよというものでした。 そしてその記事に対して前述の通り、floralさんのポストからIE7だとなにやら

    mooiboom
    mooiboom 2007/10/12
    バグかな?いずれ引っかかりそうなので覚えておく。
  • Yahoo! UI Library: Fonts CSS を使うのなら、Opera には気を付けて!

    Yahoo! UI Library: Fonts CSSを知ってから、CSSを書く際にfont-sizeは大体このライブラリを読み込ませてから使っています。ただし、Operaで表示する際には、気をつけたほうがよさそうな点があったので、メモしておきます。 Fonts CSSはどういう構造になっているのか詳細は分かりませんが、とりあえずクロスブラウザで同じフォントサイズを実現してくれる摩訶不思議なライブラリ。デフォルトのフォントサイズ、つまりfont-size: 100%;は13pxになっており、それからfont-sizeをパーセントで指定することによって、pxでフォントサイズを指定するような感覚で、フォントサイズを指定することができます。 ただし、Operaにおいては、フォントサイズを100%以下、つまり12pxなどにするときはフォントがほかのブラウザより、小さく表示されるバグがあるようです

    Yahoo! UI Library: Fonts CSS を使うのなら、Opera には気を付けて!
    mooiboom
    mooiboom 2007/10/12
    これか。Operaで字が小さくなってた原因。コメント欄のハック試してみる。
  • floatした際に背景が消える件(IE編)

    floatした際に背景が消える件(IE編) floatした際に背景が消える件でIEには『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグがあると説明しました。 逆を言えば、親要素に幅や高さを指定しなければFirefoxと同じ表示になります。 サンプルとなるhtmlは <div class="parent"> 親ボックス <div class="child"> 子ボックス </div> <div class="child"> 子ボックス </div> </div> とします。 これに対して div.parent{ background:#39FF6B; } div.child{ border:1px dotted #000; height:100px; width:100px; float:left; } このようなCSSを適用した場合、FirefoxとIE

    floatした際に背景が消える件(IE編)
  • operaでのfloatの挙動

    operaでのfloatの挙動 TPLHさんでOperaでfloat要素の後続が回り込まないとのエントリーを見て、気になったことをボクもエントリーしておこう。 TPLHさんのエントリーでは以下の記述で、OperaだとBOX3が回り込まないというもの。 <div class="sample-code"> <div style="width:240px; list-style:none; margin:0; padding:0;"> <p style="border:1px #333 solid; margin:0 0 10px; padding:10px; background:#ccccff; ">BOX1</p> <p style="width:93px; height:130px; border:1px #333 solid; margin:0 10px 0 0; padding:10

    operaでのfloatの挙動
  • input要素などにおけるIEのバグ

    input要素などにおけるIEのバグ ちょっと、はまったのでメモ書き IE6やIE7では、margin-leftとwidthが指定されたブロックレベル要素内の行ボックスの先頭にinput要素やtextarea要素がある場合、適切な位置に配置されないというもの。 select要素などは適切に配置される。 CSS p{ margin-left:50px; width:100px; } HTML <p><input type="text" /></p> <p><textarea></textarea></p> <p><select><option>test</option></select></p> サンプル とりあえずmargin値で余白をとるのではなくpadding値を指定することで対応。 関連エントリー operaでのfloatの挙動 IE7でページが表示されない件について IE7用のCS

    input要素などにおけるIEのバグ
    mooiboom
    mooiboom 2007/08/24
    「IE6やIE7では、margin-leftとwidthが指定されたブロックレベル要素内の行ボックスの先頭にinput要素やtextarea要素がある場合、適切な位置に配置されない」
  • ネットのサラダボウル: DW8で生成するポップアップメニューがIE7で崩れる件を解消してみた

    以前いろんなフォーラムで見られていた、DW2004やDW8のビヘイビアを利用して作られたポップアップ先日新しく登場したブラウザ界の重鎮、IEのバージョン7ではどうも上手く動作しないという問題。 以下はIE6とIE7を見比べてみたの図 見比べるとテキストの部分が横へ並ばず、幅が狭いがために縦に並んで見えてしまっています。 これはIE7のbeta版が登場してすぐにいろんなフォーラムで問題にあがっていましたが、解決方法まで掲載という流れにはたどり着きませんでした。 そんな矢先、久々にGoogleをつかって調べてみると、なにやら新しい解決方法を掲載しているブログがちらほらと出てきています。 ・21/12: 【メモ】DW8×IE7 ポップアップメニューの表示問題 by Happy Hour さん Happy Hour さんの記事によるともともとMac版 IE5でも同じ現象による表示崩れがおきていた

    mooiboom
    mooiboom 2007/07/21
    ?きっといつか助けられそう。