移転しました http://please-sleep.cou929.nu/20090815.html
移転しました http://please-sleep.cou929.nu/20090815.html
今日ちょっとひっかかったIE7のCSSバグをメモしておきます。 どうやらborder付きのbox内に2重に入れ子にしたfloatさせたboxの親要素(ややこしい!)のmarginが効かなくなるようです。 口で言い表しづらいので、以下のソースを見てください。 XHTML <div id="page"> <div id="content"> <ul> <li id="hoge">hoge</li> <li id="huga">huga</li> </ul> </div> </div> こうなっている時、#contentにborderが設定されると、UL要素のmarginが効かなくなります。 CSSサンプルは以下の通り。 CSS * { list-style: none; margin: 0; padding: 0; line-height: 1; } div#page { width: 350
こんにちは。島津です。 今回は、テーブルの列の幅指定に関する話題です。 表組みを使う時、内容やデザインにしたがって 列の幅サイズを指定することはよくあると思いますが、 colspanによるセル結合と組み合わせて使った場合に 実はちょっとした落とし穴があります。 とりあえずサンプルをご覧下さい。 ▼スクリーンショット ※上がWindows Firefox3、下がWindows Internet Explorer7です。 (htmlコーディング) <table> <tr> <th class="col01">商品No.</th> <th class="col02">商品名</th> <th class="col03">価格</th> <th class="col04">概要</th> </tr> <tr> <td class="col01">01</td> <td class="col02">
追記 http://jsdo.it/uupaa/u0QX に最小化したコードを載せました 今回のケースでは、条件(1)と(2)を満たす場合に、どんどん重くなっていくようです。 function bench() { // (1) nodeList を関数内部で毎回取得している var nodeList = document.getElementsByTagName("li"); i = 0, iz = nodeList.length; for (; i < iz; ++i) { // (2) textContent に代入している nodeList[i].textContent = i; } } 本文 原稿書きの資料用に、最新のブラウザでベンチマークを取得していたところ、Opera10.60 のスコアだけがどんどん悪くなる(遅くなる)ケースがあることに事に気が付きました。 条件を絞り込んでい
※この記事は古いバージョンの Firefox について書いた内容です。最新バージョンでは正常に動作しています。 Firefox 3.5 の CSS のレンダリングには仕様なのかバグなのかよくわからない挙動が起きることがあります。 というか恐らくバグなのですが、簡単にいえば、CSSで display: table-cell; を指定してマルチカラムレイアウトを行っている場合に Firefox 3.5 だとまれにカラム落ちしてしまうという現象が起きてしまいます。 現象 まず以下のサンプルを見ていただきたいと思います。 新しいウィンドウで開く Firefox 3.5 で見たときどのように表示されていたでしょうか? ソースは以下のようになっています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.or
※2013-10-27 追記 ブクマしてくださるのはうれしいのですが、この記事は見てのとおりとっても古いです!! どちらかというと「当時のIE8/Chromeのバグ」という面が強いと思うので、最新の状況は各自でご確認ください! 最近やっとIE6を捨ててIE8にしてみたわけなんだけども、どうも特定の文字だけ化ける。 例えば、Yahoo!知恵袋の質問ページでは、「質問日時」や「残り時間」の後のコロンが矢印みたいな記号になってしまう。 他にも化けた文字があるのでコピペしてみるとどうも全角数字っぽい。 で、ググってみたところ Firefoxで全角数字が文字化け - (・∞・) という記事を発見。 Firefoxとありますが、ChromeもIE8も同様な現象が発生する様子。IE7は検証してない。 文字化けの理由はLucida Grandeというフォントにあるようだ。 http://pb.practi
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
jqueryプラグインgalleriaをホームページに使ってみようと、サンプルからちょろちょろ修正してた。Firefoxで動作確認とかして最後にIEでチェックすると表示がおかしいぞと気づく。position:absoluteにしているのに位置がおかしい。 IEのバグらしい。 to-R『floatした際に背景が消える件(IE編)』(参照) IEに対して対応するには以下のような方法があります。 width:100%を指定する 親要素に対してwidth:100%を指定することにより、IEの『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグを発生させることができます。 親要素にwidth:100%を指定したら、ちゃんと表示された。
以前のエントリー:IEのhasLayoutをtrueにした時に起こる不具合の続きです。 前回は IE の様々な CSS のバグは hasLayout という IE 独自プロパティを true にすることで回避ができるものの、今度は hasLayout が true の時にのみ起こる別のバグが発生してしまう、というエントリーでした。 今回は hasLayout の値を true にした要素を false に戻す方法をご紹介します。 * { zoom: 1; } 上記のようにユニバーサルセレクタに「zoom:1」を指定すると、全ての要素の hasLayout プロパティが true になります。 これにより IE の CSS バグがかなり解消されますが、ul や ol のリストマークが消えてしまうなど別の不具合が起こります。 この不具合を回避するために、以下の記述で ul, ol, li それ
IE6のバグで通称「いないいないばあバグ」というものがあります。日本語訳しない状態で「peek-a-boo bug」。 リロードしたり、スクロールしたりすると、CSSで指定したborderやbackgrund-imageが出たり消えたりする、というバグです。 というか、基本状態で表示されていなくて、リロード、スクロールで出たり消えたりする、のほうが正しいんでしょうか。 「いないいないばあバグ」とは言いえて妙の、訳の分からんバグです。こういうの誰が命名したんでしょうね。 いないいないばあバグの対処法としては、 問題の出る要素を囲っている div に line-height を指定する。 問題の出る要素に width または height を指定する。 問題の出る要素の中の要素に position:relative を指定する。 の3つの方法があるようです。他にもあるかもしれませんが、と
先日、仕事でHTML4.01 Transitional+CSSでコーディングしていたところ、position:absolutを指定したボックスの中にある要素が、Windows IE6でズレて(飛び出て?)表示されるというバグがありました。 3つのボックスに「position:relative」をかけて、その子要素をabsoluteしてたんですよ。で、3つのボックスを横並びにしたかったので「float:left」をかけてみたら・・・なんと!3つ目のボックスの中の子要素の最後の一つが、CSSが外れたかのように左下に表示されちゃったんです。 どんな感じかというと、 こんな感じ。これが、IEだけで起こるんです。FirefoxやらOperaはオッケー。意味不明。 ためしに、枠外に飛び出てしまう要素に「border」を入れてみたけど、フツーに本来あるべき場所に枠が。でも、中身は左下。・・・なんじゃこ
[MultipleIEs](http://tredosoft.com/Multiple_IE) の Internet Explorer 6.0 でリストの背景画像が表示されなくてハマったのでメモ。 ## 問題の状況 とりあえず、問題の起きる状況をまとめてみます。 ### Internet Explorer 6.0 のスナップショット こんな感じでリストマーク ( 背景画像 ) が表示されない。 ### HTML のソース ### CSS のソース #test { position: relative; width: 150px; height: 150px; } #test ul { list-style-type: none; margin: 0; padding: 0; } #test ul li { background: url(list.gif) no-repeat 0 1px;
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
こんばんは、sashaです。 次のような形のスタイルを実装しようとしていて、 実例 posted by (C)フォト蔵 IE5.5や6でこんな状況に出会ったことはありませんか? (赤と青のボーダーは、elementの境目がわかりやすいように入れてあります) 実例バグ posted by (C)フォト蔵 どこがおかしいかお分かりになりますでしょうか。2項目目の赤と青で囲まれたテキストが、左に飛び出ていますね。その下にあるテキストまで、左にずれてます。 これは、多くのデザイナーの悩みの種である、「IE」の代表的なバグのひとつです。 このバグを再現させるのに必要なことはたったこれだけ。 「divの中にdiv」など、ブロック要素を2重にする 外側のブロック要素に、border-leftとpadding-bottomを定義する 以上。これだけでIEさんの地雷を踏めます。 以下のH
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く