記事データ 投稿者 望月真琴 投稿日時 2006-10-25T22:31+09:00 タグ CSS Firefox IE Opera スクリーンショット バグ 仕様 概要 ユニバーサルセレクタにて font-size を指定しており、かつ擬似要素の方で font-size を指定しなかったら、 IE7 は擬似要素の元となった要素の font-size ではなくユニバーサルセレクタの font-size を元にするみたいです。 リプライ リプライはまだありません。 IE 7 だけ文字が小さいぞ ? IE 7 での表示確認を目下行っている最中ですが、 hxxk.jp では大きな表示崩れは起こっていないようです。 まあ、 IE 6 でもバグ対策で一部の border を表示しないといった対応を採っていた以外は同じような表示になっていたので崩れるとは思っていませんでしたが。 しかし、 MOMENT
先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ、かなり厄介な IE のバグのようで、消えるときの条件がいろいろあることがわかったので、整理してみたいと思います。 まず最初に見つけたのが、以下のサイト。 » IEで position:absolute した要素が消えるバグ こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う～ん、なぜだ・・・ 日本語のリソースを調べてみても解決策
キャプチャ見てもらうと分かるようにIE8だけ極端に位置がおかしい。 IE8がリリースされてから、まだあんまりいじってないのでよく分かってないのですが、今組んでいるサイトをIE8でチェックしたら、「あれ？表示がおかしい...」って事に遭遇してしまったので、エントリー。 よくある感じで、リストのマーカー変わりに背景の指定をa要素にして、そのリスト内には画像テキストが入ってたんです。はい。 毎度のようにサンプルも用意してみました。 サンプルを見る 発生条件は調べた感じa要素内にimg要素があって、a要素にbackgroundプロパティの指定をした時に起こる感じです。 img要素にテキストが隣接してても同様でした。 サンプルみたいなデザインの場合、マーカー部分も一緒に切ってしまう事が多いから過去の案件は大丈夫だと思うけど・・・ 取りあえず、今回のサンプルに使ったソースは以下です。 <ul> <li
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。 IE6 で float を使ったレイアウトをしているとき、文章の末尾（最後の2文字くらい）が変なところに表示されるということがあります。 どう変かというと、末尾の文字をそのままコピーしてはみ出たような、そんな感じです。 もちろんソースにそんなものは含まれていません。 JavaScript や PHP なんかを使っている訳ではなく、純粋に HTML と CSS のみでもこのような事象が起こります。 で、とりあえずググってみて見つかったのは下記2つの記事。 »コメント文が出力に影響！？ »IE6のバカヤロウ (room ant) これらを読んで、とりあえず「float
table と caption の margin 2008-08-13 0 0 XHTML/CSS caption, CSS, table, XHTML Firefox，Safari，Opera は IE に比べるとだいぶWeb標準に準拠してレンダリングされます。しかし，仕様に詳しく定められていないところは（追記参照）ブラウザごとのクセがあり，表示結果が微妙に違ったりします。以前，table に caption を入れたとき，margin を合わせるのにちょっと苦労した経験があったので，改めて調べてみました。 caption は表題を示す要素です。table の子要素になり，table の開始タグの直後に記述します。 table の margin-top が入る位置 <p>テキストテキスト</p> <table> <caption>サンプル（ここがcaption）</caption> <t
キャプションに余白が指定できない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
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に変換され，端数処理して整
2.3 からひきづってる（と思われる）カスタムなタグスラッグを設定しているときのタグの重複問題が 2.5 RC1 でも解決してないことに今頃気づいた。wp-testersやwp-hackersやtracを調べたが誰も報告してないので、このままリリースされたらたまらんと思って trac に報告したが、速攻で 2.6 に先送りされてがっかりorz。私一人が騒いだとろで説得力はないので、この問題にお困りの方はぜひこのチケットに書き込んでください（ #6593 (Tags with custom slugs get recreated on post edit screen) の重複として閉じられました）。 追記: 2008-07-20 2.6 では #6593 のパッチで回避できます。 再現手順： タグ名”aaa“、タグスラッグ”bbb“で新規にタグを作成 新規投稿を作成し、タグ入力欄に”aaa
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>
CSSnewbieのエントリーから、ボックスモデルのマージン(margin)とパディング(padding)の利用シーンにおける違いを紹介します。 When to Use Margins and Padding マージン(margin)を採用する場合 パディング(padding)を採用する場合 ブラウザによる問題 マージン(margin)を採用する場合 borderの外側にスペースが必要な場合。 スペースに背景色(画像)を適用したくない場合。 上下に隣接したボックスにスペースを設ける場合、マージンの相殺を期待して、大きいサイズを有効にしたい場合。 例：15px + 20px の場合、スペースは20px。 ※相殺されない場合もあります。 パディング(padding)を採用する場合 borderの内側にスペースが必要な場合。 スペースに背景色(画像)を適用したい場合。 上下に隣接したボックスにス
ここにはWindows版Opera6.0以降（Opera）のCSS/DOM実装のバグ一覧があります。以下のリストからそれぞれのバグの詳細を見ることができます。 OperaのCSS実装 Opear6にDOCTYPEスイッチはなく、単一のルール（標準モード相当）に従ってCSSの解析・描画が行われます。 Opera7.0以降に「DOCTYPEスイッチ」が実装されています。DOCTYPE宣言により、W3Cが策定したCSS仕様に従う「標準モード」か、過去のUA実装されていたCSS仕様に従う「互換モード」で解析・描画が行われます。 DOCTYPE宣言なし： 互換モード HTML3.2以前： 互換モード HTML4 Transtional/Frameset（システム識別子なし）： 互換モード HTML4 Transtional/Frameset（システム識別子あり）： 標準モード HTML4 Stric
絶対配置でこんな風にすると <div class="Container"> <div class="InsideBox">x</div> </div> .Container{ width:200px; height:101px; background:blue; position:relative; } .InsideBox{ width:30px; height:30px; background:yellow; position:absolute; left:0; bottom:0; } 絶対配置で下付けボックスサンプル IE6ではこんな感じになってしまいます。 何故か下に1px空いてしまうのです。どーやらIE6は、絶対配置をしてbottomを指定すると、親ボックスの高さが奇数の時、1pxあいてしまうという現象があるっぽいです。この場合は、div.Containerが101pxということ
喜寿を過ぎた隠居の気儘な生活の記録。言わば、「游行期」の雑記帳です。「林住期・游行期」の過ごし方に少しでも参考になればと願っています。 Internet Explorer を６（IE６）から７（IE7)にアップグレードするときに起こった不具合を備忘録的に書き留めておく。 IE7のインストールは難なくできたが、いざ立ち上げてみるとタブが「接続中」という表示がでたまま、スタートページにしているGoogleに全くつながらない。フリーズしているようでもない。「Windows タスク・マネージャー」で様子を見てみるとCPU使用率はほとんど 0% を指している。やむなく、プロセス・タブで iexplore.exe をプロセス終了にしてIE7の立ち上げを断念し、アンインストールした。（IE6 と違って、IE7 は 「プログラムの変更・削除」に Windows Internet Explorer 7 とで
ガストは、同社が2007年4月19日に発売した「リーズのアトリエ～オルドールの錬金術士～」（以下、リーズのアトリエ）について、不具合を修正したバージョンを制作。すでに購入した人には無償交換に応じると発表した。 「リーズのアトリエ」については、ソフト発売後、プレイ中にフリーズする、期限を越えてもプレイできるといった不具合が同社に寄せられていた。ガストは公式サイトで対応していたが、今回修正版が完成したため、無償交換を開始したとのこと。 新たに制作した修正版は、以下のようにパッケージおよびDSカードのラベル、取扱説明書のカラーリングが変更されている。 従来版 従来版パッケージ 従来版取扱説明書 従来版DSカード 修正版 修正版パッケージ 修正版取扱説明書 修正版DSカード 不具合修正点 戦闘時、アイテム使用時などにゲームが停止してしまう不具合を修正 2周目以降のプレイで、まだ作成できないはずの依
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが２倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが２倍になってしまうバグ IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
CSS-Discussにアップされている「IE 7 Bugs」の意訳です。 省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意： バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。 公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグ フォントサイズの継承 IEの相対指定のフォントサイズの継承は、うまく機能しません。 相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。 例： body{ font-size: 100.01%; } ※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。 キーワード指定でのサイズ フォントサイズに「small
思い出せるだけ書き出してみる。 コメントに投稿されたモノを追記。あと、[]で囲ったものは私の超推理なので、信用はしないでください。 追記:2007/10/30 1.2にfollowする裏技を追記 困ってるの 投稿できない発言がある それ、Twitterコマンド。(ついったーコマンド、コマンド - TwitterまとめWiki) しかも、コマンドはコロコロと仕様が変わっている(onやfavなど、最近まで使えていたコマンドが使えなくなった模様です。d(direct message)コマンドは使えることを確認済み)ようなので、最も始末が悪い。発言の頭に.(ドット)をつければ回避できるとのこと( thx tsupo) 向こうからFollowされてるのにFollowを返すことができない人がいる2008年1月現在、改善された模様 まれに発生する模様。[相手に一度removeしてもらうとFollowでき
IE7でスタイルにfilter(半透明にしたいときなどに使用)を指定すると、文字が細くなってみえる場合があります。 単にfilterに何かを設定しただけでその現象となるようです。opacity=100や、JavaScriptでelement.style.filter = nullでも発生します。 なお、フォントによって現象がまちまちのようです。 →Blogへ戻る font-family: Verdana, sans-serif; filter: alpha(opacity=100) あいアイ哀12azAz!- あいアイ哀12azAz!- <p style="width: 50%; font-family: Verdana, sans-serif;">あいアイ哀12azAz!-</p> <p style="width: 50%; font-family: Verdana, sans-seri
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
