textContent を使うと Opera10.60 がどんどん重くなる - latest log
追記 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 3.5 の display: table;(table-row; table-cell;) 関連の挙動について
※この記事は古いバージョンの 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
日本向けのサイトでフォントにLucida Grandeを最初に指定してはいけない - ayu118の日々雑感。
※2013-10-27 追記 ブクマしてくださるのはうれしいのですが、この記事は見てのとおりとっても古いです！！ どちらかというと「当時のIE8/Chromeのバグ」という面が強いと思うので、最新の状況は各自でご確認ください！ 最近やっとIE6を捨ててIE8にしてみたわけなんだけども、どうも特定の文字だけ化ける。 例えば、Yahoo!知恵袋の質問ページでは、「質問日時」や「残り時間」の後のコロンが矢印みたいな記号になってしまう。 他にも化けた文字があるのでコピペしてみるとどうも全角数字っぽい。 で、ググってみたところ Firefoxで全角数字が文字化け - （・∞・） という記事を発見。 Firefoxとありますが、ChromeもIE8も同様な現象が発生する様子。IE7は検証してない。 文字化けの理由はLucida Grandeというフォントにあるようだ。 http://pb.practi
HisasAnn.com is for sale | HugeDomains
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
position:absoluteにしたときにIEで位置がずれることの対応 - まんぞうブログ
jqueryプラグインgalleriaをホームページに使ってみようと、サンプルからちょろちょろ修正してた。Firefoxで動作確認とかして最後にIEでチェックすると表示がおかしいぞと気づく。position:absoluteにしているのに位置がおかしい。 IEのバグらしい。 to-R『floatした際に背景が消える件(IE編)』（参照） IEに対して対応するには以下のような方法があります。 width:100%を指定する 親要素に対してwidth:100%を指定することにより、IEの『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグを発生させることができます。 親要素にwidth:100%を指定したら、ちゃんと表示された。
IEのhasLayoutをtrueにした時に起こる不具合を回避する | バシャログ。 - WEB制作
以前のエントリー：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 それ
リロード、スクロールで線・画像が消える。通称「いないいないばあバグ」 | Igaloglog
IE6のバグで通称「いないいないばあバグ」というものがあります。日本語訳しない状態で「peek-a-boo bug」。 リロードしたり、スクロールしたりすると、CSSで指定したborderやbackgrund-imageが出たり消えたりする、というバグです。 というか、基本状態で表示されていなくて、リロード、スクロールで出たり消えたりする、のほうが正しいんでしょうか。 「いないいないばあバグ」とは言いえて妙の、訳の分からんバグです。こういうの誰が命名したんでしょうね。 いないいないばあバグの対処法としては、 問題の出る要素を囲っている div に line-height を指定する。 問題の出る要素に width または height を指定する。 問題の出る要素の中の要素に position:relative を指定する。 の3つの方法があるようです。他にもあるかもしれませんが、と
IEで絶対配置（absolute）のボックスの中身がずれる (Happy Swing)
先日、仕事でHTML4.01 Transitional＋CSSでコーディングしていたところ、position:absolutを指定したボックスの中にある要素が、Windows IE6でズレて（飛び出て？）表示されるというバグがありました。 3つのボックスに「position:relative」をかけて、その子要素をabsoluteしてたんですよ。で、3つのボックスを横並びにしたかったので「float:left」をかけてみたら・・・なんと！3つ目のボックスの中の子要素の最後の一つが、CSSが外れたかのように左下に表示されちゃったんです。 どんな感じかというと、 こんな感じ。これが、IEだけで起こるんです。FirefoxやらOperaはオッケー。意味不明。 ためしに、枠外に飛び出てしまう要素に「border」を入れてみたけど、フツーに本来あるべき場所に枠が。でも、中身は左下。・・・なんじゃこ
[ CSS ] IE6 でリストの背景画像が表示されないよ
[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;
![[ CSS ] IE6 でリストの背景画像が表示されないよ](https://cdn-ak-scissors.b.st-hatena.com/image/square/19691f3db719fc116cbcdd5e767c89ee15487f3e/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2018%2F09%2Fudon-1.jpg)
IE6でよく遭遇するCSSのバグとその解決方法 | コリス
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
ウノウラボ Unoh Labs: IE6 CSS 『border-leftとpadding-bottom』の謎
こんばんは、sashaです。 次のような形のスタイルを実装しようとしていて、 実例 posted by (C)フォト蔵 IE5.5や6でこんな状況に出会ったことはありませんか？ （赤と青のボーダーは、elementの境目がわかりやすいように入れてあります） 実例バグ posted by (C)フォト蔵 どこがおかしいかお分かりになりますでしょうか。2項目目の赤と青で囲まれたテキストが、左に飛び出ていますね。その下にあるテキストまで、左にずれてます。 これは、多くのデザイナーの悩みの種である、「IE」の代表的なバグのひとつです。 このバグを再現させるのに必要なことはたったこれだけ。 「divの中にdiv」など、ブロック要素を2重にする 外側のブロック要素に、border-leftとpadding-bottomを定義する 以上。これだけでIEさんの地雷を踏めます。 以下のH
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[ CSS ] IE で垂直マージンが相殺できないバグ![[ CSS ] IE で垂直マージンが相殺できないバグ](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a05d2bf64bd9f5604fd6bd8288b6381789ec693/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2015%2F10%2Fie-vertical-margin-bug-ie.png)
http://tetlist.info/2009/02/positionrelative_border_intern
http://hpbuilder.net/weblog/2007/08/06203819.html
IE (Windows) CSSバグリスト 背景色が指定された要素内にフロートがあるときに要素内の文字が消える(IE6)