IE9でCSS3が効かない!?
また問題児のIEのお話 先日、カラーミーショップというASPサービスでショッピングサイト制作の注文があってカスタマイズをしていました。構築中にブラウザチェックをしていたら、Internet Explorer 9で一部表示されていない表現がありました。 CSS3を使用した部分だったのですが、そもそもInternet Explorer 9ではCSS3の主なプロパティは対応しています。 カラーミーショップの構築中に何かミスがあったのかと思い、ソースを丸ごとコピーしてローカルに複製したものをチェックしてみたら、正しく表示されました。 ソースは全てフルパスで書いているので全く同じ。 両者の違いはカラーミーのサーバーにあるかローカルにあるか、の違いのみです。 それでcssの一部に問題が出る事は通常考えられません。 どういう事でしょうか。 ドキュメントモードについて 調べてみると、どうもサーバーのものを
これは凶悪……コーディングのヤバいバグ＆仕様 Best5 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。 今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。 なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。 第5位 IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。 こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな
Google Chromeでtext-shadowしたフォントの表示がおかしくなる条件と対処法
Google Chromeでtext-shadowしたフォントの表示がおかしくなることがあったのでちょっと調べてみました。 Arialやメイリオといったアンチエイリアスのかかったフォントが汚くなったり、ビットマップフォントにアンチエイリアスがかかってしまう現象です。 環境はWindows Vista/7でのGoogle Chrome 13.0.772.0 dev-mです。 CSS text-shadow on Google Chrome Test 上段がConsolas指定、下段がMS Gothic指定です。 スクリーンショットは以下の通り。 Google Chromeは一部のtext-shadowにブラウザ独自のアンチエイリアスを使用するらしく、それによって起こる現象と思われます。 また、上のテストを見る限りでは 「最初のシャドウ指定にブラーが設定されており、アルファ値が0以外のカラーを
ブラウザ幅を超えた部分を隠す手法として body { overflow-x:hidden; } はあまり使わない方がいい気がする件
ブラウザ幅を超えた部分を隠す手法として body { overflow-x:hidden; } はあまり使わない方がいい気がする件 2011 年 5 月 8 日 ツイッターでも書いたのですが、preの背景をブラウザの幅いっぱいに拡大する というエントリ読んでて「ほうほう :before/after 疑似要素を使う手もあるか…」と感心しつつトラックパッドでスクロールさせたら、突然コンテンツが消えてしまって深夜に「うぎゃー！」とかなっておったのです（注: これ書いてる今は直ってます） まあ pre に限らず、基本的に幅固定で中央寄せだけど、内側にある特定のブロック要素の背景はブラウザ幅いっぱいに広げたいという場合、広げたいブロック要素に大きめ（10000pxとか）のパディングを付けて左右に広げ、それと同じだけのネガティブマージンを付ける事で背景部分を外側にはみ出させる手法は割とよく使われる手法
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ かなりレアなケースだと思うのですがiPhoneのSafariで特定のzoomとfont-sizeの際に文字サイズが拡大するバグがあります。 次のようなCSSとHTMLの組み合わせ html{ zoom:0.5; } p.case1{ zoom:2; font-size:10px; } p.case2{ font-size:20px; } p.case3{ font-size:21px; } p.case4{ font-size:22px; } <h1>case1</h1> <p class="case1">1あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ<p> <h1>case2</h1> <p class=
Chrome's inset box-shadow bug: Fixed! - Paul Irish
If you’ve ever had inset box-shadow styles, perhaps for a button, looking like this: You might have noticed it comes out looking pretty bad in Windows and Linux in Chrome. Why not on Mac? The Mac port uses CoreGraphics, while the others use Skia for system graphics which is where the root issue resided. I’m happy to report the latest dev channel shipping now (10.0.628.0) has fixed this bug! Woohoo
jmblog.jp - Win/IEで絶対配置（position: absolute）のボックスが消えるバグの検証ページ
http://jmblog.jp/archives/180より。 Bruno Fassino氏のIE/Win: Disappearing position:absolute boxes near to floats and clears のテストを元にしています。 日本語 | English 概要 Win/IEでは、以下の場合に絶対配置（position: absolute）にしたボックスがレンダリングされないことがある。 position:absolute が float と hasLayout をもつ clear の直前に存在する場合。（Test1） 解決方法 : #1, #2, #3, #4, #5 position:absolute が float と hasLayout をもつ clear との間に存在する場合。（Test2） 解決方法 : #1, #2, #3
CSS の z-index について整理してみる | HTML + CSS | かたつむりくんのWWW
今日は CSS Nite in Ginza, Vol.31に行ってきます。テーマは「CSSレイアウト：IE 6対応のかんどころ／小林 信次（まぼろし）」ということで、以前「CSS Nite ビギナーズに参加した感想とか要望とか」で書いた「CSS Nite への要望っぽいこと」が実現した感じで、すごく楽しみです。 僕は Web制作の現場にいないので、実務経験が少ないです。ですので、日頃、Web 制作を仕事としてやっている人が、サッと解決できちゃうようなことにもハマったりします。 そういった点を補うには、今日の CSS nite のようなテーマはすごくありがたいです。 さて、前置きが長くなりましたが、今日は以前ひっかかった IE6 の z-index の解釈について、改めて整理してみました。 どんなシーンでハマったか このブログもそうですが、最近ページ上部にグローバルナビゲーションを配置し、そ
ITキヲスク | IE6の頻出CSSバグいろいろと、それに対処するハック術
CSSコーディングにおいて最も忌むべきもの、それはIE6。 「ホントに仕様書読んで作ったのか？」と疑いたくなるほどのオリジナリティ溢れるCSS解釈は、IE6の絶大なシェアとも相まって、一層容赦ない問題となりました。 世には様々なハック術や回避方法が出回るも、それ自体がIE6のバグを利用したモノだったりして、IE立てればOpera立たず、みたいな状況に脳ミソとろけた経験のある方も多いのではないでしょーか。 今回のエントリーでは、そんなIE6で頻出するCSSバグと、それを対処 / 回避するハック術なんかを取り上げてみたいと思います。 これでもうIE6なんざ怖くない!? IE6の頻出CSSバグと対処ハック術 1.横方向のmarginが倍になっちゃうバグ。 恐らく最も引っかかるであろう、この凶悪なバグ。 このバグに見舞われてしまう条件はものすごくカンタンで、「floatさせた要素に、floatした
CSS Differences in Internet Explorer 6, 7 and 8 — Smashing Magazine
One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share. The inte
li 要素の子孫が ul,ol,dl 要素の場合、 IE 6 はリストマーク表示が他ブラウザと異なります | builder, Double Cradle
li 要素の子孫が ul, ol, dl 要素の場合、リストマーク表示が他と異なる IE 6 2008/05/24 土曜日 - page 78 li 要素の子孫要素が ul, ol, dl といったリスト要素の場合、 Internet Explorer 6 のリストマーク表示は次のようになります。 IE 6 の表示を他の Web ブラウザ表示と同じにする方法はあるのですが、その方法が妥当かどうかはまた別の話しです。 1 番目の li 要素にリストマークが表示されない。 最初の行に li 要素のリストマークだけが表示され、次の行以降に li 要素の内容が表示される。 <ol> <li> <dl><dt>2008年現在</dt> <dd>アナログTV放送中</dd></dl> </li> <li> <dl><dt>2011年</dt> <dd>アナログTV放送終了予定</dd></dl> <
IE6で、文字(画像)が複製されてズレる - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 IE6の表示バグです。とあるショップサイトを構築してる時に、たまたま出会いました。かなり久しぶり。 ↑が正常な表示。Opera/Firefox等はこれです。これがIE6だと... こうなる。初見では「継承か？ marginの重複か？」とか思うズレですが、試しに選択してみると、問題が解りやすくなります。 なんか妙な要素が出現してますね。それに押された感じ。試しにテキストにしてみると... なんか複製されてます。さ～どうするか。 解説 実はこれ、「Explorer 6 Duplicate Characters Bug」という長ったらしい名前でそこそこ有名なバグで、複数のf
RedLine Magazine : IE6 → 透過PNG+overflow=混ぜるな危険（追記有）
IE6 → 透過PNG+overflow=混ぜるな危険（追記有） >>081205：追記 解決しました (追記:081205)はてブのコメント見たらこの下記の症状が出ない方もいらっしゃるみたい。私が検証に使ってるIE6はIETesterのものと「IE6 standalone の落とし穴」っていう記事で書いた透過も使えるこっちのスタンドアローン版IE6なんだけど、もしかしてもしかして正規版では正常に動作してるとか？？コメント書いてくださった方が正規版IE6なのかどうかは分からないけれども、一応その件も補足しとこかなということで追記。 やりたかった事 親ボックスには大きめの写真を入れたい。 その親ボックスの写真は背景じゃなく、諸事情でimgタグで入れること。 その中にまたボックスを作って背景に透過PNG画像を使用してテキスト本文入れたい。親ボックスの写真が透ける感じで。 そのテキスト本文部分は
[Safari]Clearfixで下スペースが出てしまう問題 [css,hack,safari,tips] - BlurBlue-Note
以前、[CSS][コピペ]clearfixでコピペ用に最新版のclearfixを紹介していましたが、今回Safariで問題があることが発覚したので、修正版をPostしておきます。 CSS .hoge:after { display: block; clear: both; height: 0; visibility: hidden; content: "."; line-height: 0; } .hoge { display: inline-table; min-height: 1%; } /* for macIE \*/ * html .hoge { height: 1%; } .hoge { display: block; } /* end of for macIE */ どこが変わったかというと、モダンブラウザ用に書かれている、.hoge:afterの部分に line-height
IEでbrタグの改行幅でハマった - guccyonikki
HTMLの表示でbrタグを複数回挿入することで行スペースを空けようとしたら、 FireFoxではbrを入れた個数だけ改行されたのに、 IEでは何故か詰まってしまって改行されない。 どうやらIEのバグらしく、２個以上の連続したBRタグは無視するらしい。 対処方法はBRタグのスタイルに letter-spacing:0 を適用することだそう。 実際に適用してみると正しく改行された。 結構有名なバグなんだろうか。
スタイルシートをめぐる冒険: マージンを使ってdtとddを横並びにするとdtが消える
定義リストで、dtとddを横並びにしたいとき、ddのマージンの調整でそれを実現するやり方は私がよく使うテクニックなのだが、あるとき、IE7で見たらdtがすっかり消えていて、あわてたことがある。原因は、またしても、その定義リストを含むボックスへの背景画像の指定だった。 [該当するブラウザ] Windows／IE7.0以下 症状 たとえば、年表のようなリストを角マルの矩形で囲むレイアウトを組んだとする（右図）。 角マル矩形は、 frame_top.gif（トップの部分）、 frame_bg.gif（中間部分）、 frame_btm.gif（ボトムの部分）、 以上3つの画像を、dlおよびdlを含むボックスに背景として指定することで実現している。詳細は以下の通りである（→サンプルページ1）。 【スタイルシート】 body { margin: 10px; padding: 0; } .box { w
Firefoxの印刷と闘う その2 | Takazudo Clipping*
このブログのアクセス解析を見ると、キーワード「firefox 印刷」で検索してこのエントリに飛んでくる人がかなりいます。やっぱりみんな困っているんだなぁと。Firefoxの印刷はかなりやっかいで、完全FIXは無理かもしれないという結論に自分の中でも解決していたのですが、最近この方法をやっていて、普通に印刷できてます。 display:tableで印刷対応 まずは、普通にfloat:left left leftで左に詰めたレイアウト。 floatによる3カラムレイアウトのサンプル（印刷対応無） <div id="all"> <div id="header">header</div> <div id="body"> <div id="localNav">localNav</div> <div id="main">main</div> <div id="relatedNav">relatedNa
RedLine Magazine : Firefox3とFirefox2のselectの幅
Firefox3とFirefox2のselectの幅 そんなこんなで共存することにしたFx3とFx2なんですが、さっそく共存させてよかったと思った事がありました。 今コーディング中のサイトでこういう見た目にしたいデザイン部分があったんですよ。単純にリストをfloatさせてselectを横並びにしたいーみたいな。 幅違うやん！って気づいた。 これ、Fx3とFx2でselectの幅、若干違うんですね。知らなかった。CSS関連のネタは見たけど部品の違いなんて気にもしてなかった・・・。上のできあがり見本の画像はサンプルだからアレなんですが、実際のデザインにはその部分にも背景画像が入ってて、セレクト周りの幅でうまくコントロールしないと背景からはみ出てアワワ・・・みたいな感じになっちゃってました。一瞬びっくりした。 >>一応確認用のサンプルはこちら 最初もしかしてフォーム周りのmarginだかpadd
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
portal-f.pw
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
