サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
cssbug.at.infoseek.co.jp
インライン要素に指定したパディングやボーダーの上下が消える(IE6) 症状 高さが指定された要素内にあるインライン要素にパディングやボーダーが指定されているとき、パディングやボーダーの親要素をはみ出している部分が消えてしまう。 例示 <div class="example"> <p style="height:20px; border:3px solid red; font-size:18px;"> A<span style="padding:10px; border:3px solid blue;">B</span>C </p>
パディング・幅・高さを指定したリストでリストマーカーが壊れる(5.x/6.0) 症状 リスト要素に上パディング、リストアイテム要素にwidthまたはheightプロパティを指定したとき、最初のリストアイテムのリストマーカーが消える。 順序つきリストのリストアイテム要素にwidthまたはheightプロパティを指定したとき、2番目以降のリストアイテムの番号がすべて1番目を表すものになる。 例示 <ul style="padding-top:1px;"> <li style="width:90%;">1番</li> <li style="width:90%;">2番</li> <li style="width:90%;">3番</li> </ul> <ol style="padding-top:1px;"> <li style="width:90%;">1番</li> <li style="w
絶対配置/フロート状態のリストアイテム要素のリストマーカーが消える(5.x/6.0) 症状 リストアイテム要素(display: list-item; を指定した要素)を絶対配置したり、フロートにしたりするとdisplayプロパティがblock値に変更され、リストマーカーが消えてしまう。 例示 <style type="text/css"> li { border: 2px solid red; margin: 2px; } </style> <ul> <li style="position:absolute; width:5em; left:3em; top:1em;">絶対配置</li> <li style="position:fixed; width:5em; left:3em; top:2em;">固定配置</li> <li style="float:left; width:5em
li要素の子孫にリスト要素があるとリストマークが上方にずれる 2003-07-10修正。補足を追加。 2003-07-19修正。補足を修正。 2004-01-16修正。症状を修正。 症状 li要素の子孫にdl要素リスト要素(ul, ol, dl)を置くと、li要素につくリストマークが上方にずれて表示される。また、この状態のli要素に上ボーダーを設定するとリストマークが消える。また、最初のli要素のリストマークも消える。 例示 <ul> <li><dl> <dt>Win95</dt><dd>1995年</dd> </dl></li> <li><dl> <dt>Win98</dt><dd>1998年</dd> </dl></li> <li style="border:1px solid blue;"><dl> <dt>WinMe</dt><dd>2000年</dd
行の高さを正しく算出しない(5.x/6.0) 症状 文字列が存在しない行の高さを算出するとき、line-heightプロパティの値やベースラインより下の部分(ディセンダ)の高さを無視する。しかし、li要素の最後の行ではディセンダの高さを無視しない。従って、行の高さの算出が統一されていないことになる。 例示 <ul style="margin:0; padding:0;"> <li style="margin:0; padding:0; list-style:none;"> <img src="../img/img02.png" alt="■"></li> <li style="margin:0; padding:0; list-style:none;"> <img src="../img/img02.png" alt="■"></li> <li style="margin
特定のコメントより後のスタイル宣言が無視される(5.x/6.0) 2004-06-19修正。[4-112]の内容を追加。 症状 HTML文書で用いている文字コードと外部スタイルシートで用いている文字コードが異なっているとき、外部スタイルシート内で特定の文字をコメントにすると、それより後の部分のスタイル宣言が無視される。 例示 外部スタイルシート「b121.css」: p.sa1 { color: red; } /* 定 */ p.sa2 { color: blue; } この文書「b121.html」: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="b121.css"> <p class="sa1">コメントの前
select要素ではz-indexやborderなどのプロパティを無視する(5.x/6.0) 2003-09-03修正。補足を修正。 症状 select要素ではz-indexやborderなど、ほかのフォームコントロール要素で使用可能なプロパティの一部が無視される。 例示 <div style="position:relative;"> <form style="position:relative; z-index:1;"> <div> <select style="border:2px solid red; width:10em;"> <option>select</option> </select> </div> <div> <input style="border:2px solid red; width:10em;"> </div> </form>
アンカーを:hover状態にすると親ブロックの高さが変化する(5.5/6.0) 2003-05-14再作成。 症状 以下の条件群のいずれかに該当するとき、アンカーにマウスポインタ等を乗せて:hover状態にすると内側から3番目のボックスの高さが増加したり減少したりする。 条件群1 3重以上の入れ子ブロックになっている。 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。 最も内側のブロックに任意の上下マージンを設定している。 内側から2番目のブロックに背景とボーダーを設定している。 内側から3番目のブロックに任意の幅を設定している。 条件群2 3重以上の入れ子ブロックになっており、最も内側のブロックが複数存在する。 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。 内側から2番目のブロックに任意の上下マ
コメントがフロートの位置をずらす(6.0) 2004-08-08修正。[4-221]の内容を追加。 症状 フロートの前にコメントを置いたとき、フロートが本来の位置よりも下方に置かれることがある。 例示 <div style="float:right; width:7em%; background:aqua;"> <ul> <li>list1</li> <li>list2</li> </ul> </div> <!-- コメント1 --><!-- コメント2 --> <!-- コメント3 --><!-- コメント4 --> <!-- コメント5 --><!-- コメント6 --> <!-- コメント7 --><!-- コメント8 --> <div style="float:left; width:45%; background:yellow;"> <ul> <li>list3</li> <li
Safari 「Safari」は、MacOSX v10.2以降で動作するApple社製のWebブラウザです。現在はパブリックベータ2が公開されています。レンダリングエンジンにKonquerorプロジェクトのソフトウェア「KHTML」を用いています。 ここでは、Safariβ1・β2で確認できたCSSやDHTMLのバグを書いています。ただし、CSSなどのSafariバグ対策を行うのは正式版の公開を待ってからでも遅くはないでしょう。 参考資料・引用元 Apple-Safariのスレ(2ちゃんねるWeb制作管理板) Safari Resources for Web Developers(Apple Developer Connection) ねこめしにっき(娘娘飯店しるきぃうぇぶ) Safari 1.0 beta の標準仕様の実装がヤバイ点など Safari (v60) の clear プロパテ
ここには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
letter-spacingを指定した要素内で連続したbr要素が無視される(5.x/6.0) 2004-08-07修正。[4-214]の内容を追加。 症状 letter-spacingプロパティを指定した要素内では、br要素を2つ以上連続して置いても1つしか認識されない(br要素が1つおきにしか認識されない)。 例示 <p style="letter-spacing:1px;">AAA<br> BBB<br><br>CCC</p>
ここではcol要素やcolgroup要素に対してCSSを設定した場合の、ユーザエージェントによる解釈の違いをまとめています。 visibilityプロパティの項を更新。Mozilla1.7betaの情報を追加。(2004-03-26) 注意:Windows版Mozilla1.7betaでvisibilityプロパティの項にある例示を閲覧するとMozillaがクラッシュします。3月20日以降のnightlyビルドではクラッシュしないそうです。 はじめに (X)HTMLにおいて表のセル要素は行要素の子孫です。従ってスタイルシートの各プロパティの値は列要素ではなく行要素から継承します。ただしCSS2では border, background, width, visibility の4種類のプロパティに限りcol要素やcolgroup要素への適用を可としています。 <table border="2
フロートの左右マージンが指定値より大きくなる(5.x/6.0) 症状 フロート化させたボックスに左右マージンを指定すると、指定値の2倍程度のマージンが設置される。 例示 <div style="float:left; width:3em; margin-left:1em; background:aqua;">F</div> <div style="clear:left; font-family:'MS ゴシック',monospace;"> □□□□</div>
左右ボーダーとパディングを設置した要素に後続する部分がずれる(5.5/6.0) 2004-01-27修正。[3-704]の症状を加え、内容を整理。 症状 最後の子要素が非匿名ブロックレベル要素である要素の四方にパディングを設置し、さらに左または右にボーダーを設置すると、その要素に後続する要素の内容物がボーダーを設置した方向にずれてしまう。 例示(ソース) <div style="border-left:1em solid blue; padding:1px;"> <div>div</div> </div> <p style="border:2px solid red;">後続の要素</p> p要素の内容物をボーダーの外にはみ出させるような指定は行っていません。 ※実際に表示させたものはページ末にあります。 スクリーンショット 補足 この不具合によって左右にずれている
背景に関する指定がprintメディアに反映されない(IE5.5) 2002-10-12修正。WinIE6.0でもバグが発生しました。 症状 background-repeatプロパティにrepeat以外の値を指定すると、背景がまったく印刷されない。 例示 <style type="text/css"> div.a { background-image: url(../img/img01.png); background-repeat: no-repeat; background-position: left; background-color: yellow; } </style> <div class="a">左端中央に背景画像あり<br>……</div>
ここにはMacOS版Internet Explorer4.0以降(MacIE)のCSS/DOM実装バグの一覧があります。以下のリストからそれぞれのバグの詳細を見ることができます。 MacIEのCSS実装 MacIE5.0以降に「DOCTYPEスイッチ」が実装されています。DOCTYPE宣言により、W3Cが策定したCSS仕様に従う「標準モード」か、過去のUAに実装されていたCSS仕様に従う「互換モード」で解析・描画が行われます。 DOCTYPE宣言なし: 互換モード HTML3.2以前: 互換モード HTML4(システム識別子なし): 互換モード HTML4(システム識別子あり): 標準モード XHTML: 標準モード 未知のDOCTYPE宣言: 標準モード ※MacIE4にはXML宣言を閲覧領域に表示するバグがあります。 バグリスト 確認済みバグ [1-2]:first-letter擬似要
ブロックボックス化した要素を含むリストアイテムの後ろに空行が入る(5.x/6.0) 2003-11-06修正。症状と補足を変更。 2003-12-25修正。補足に回避法を追加。 2004-03-03修正。[3-882]の記述を加え、内容を整理。 症状 リストアイテム要素の内容物の末端にブロックボックスを生成する設定(display:block;)にしたインライン要素を置くと、リストアイテム要素のボックスの直後に空行が発生する。。 例示 <ul> <li><span style="display:block; margin:0; background:yellow;"> ブロック</span></li> <li><span style="display:block; margin:0; background:yellow;"> ブロック</span></li> </ul>
背景色が指定された要素内にフロートがあるときに要素内の文字が消える(IE6) 症状 背景色を指定したブロック要素内にフロート配置した要素があるとき、ブロック要素内の文字列が消える。 例示 <div style="background:aqua;"> <div>A</div> <div style="float:right; width:3em; background:blue;">B</div> <div style="clear:right;">C</div> </div>
WinIE6標準 上下マージンで0を指定しても前後の要素との間に空間ができる。 左右マージンを指定したときに罫線全体が消えてしまうことがある(Win9x上で発生しやすい?)。 WinIE6互換 上下マージンで0を指定しても前後の要素との間に空間ができる。 左右マージンを指定したときに罫線全体が消えてしまうことがある(Win9x上で発生しやすい?)。 Gecko標準 上下マージンで0を指定しても前後の要素との間に空間ができる。 左マージンを設定すると、罫線がコンテナブロックから右方にはみ出てしまう。 width:auto; を明示しても幅が調節されない。 右マージンの指定が無視される。 Gecko互換 上下マージンで0を指定しても前後の要素との間に空間ができる。 Opera6 左右マージンの指定が無視される。 表示拡大率(メニューの[表示→ズームメニュー])の値に
font-familyを指定した要素で文字化けする(5.x/6.0) 2003-05-30修正。WinIEバグ034の内容と統合。 2004-02-27修正。WinIEバグ127の内容と統合。 2004-03-03修正。全面的に修正。 症状 font-familyプロパティの指定値が[欧文フォントと総称ファミリ]または[総称ファミリのみ]である要素では、日本語などの2バイト文字が「□」や「・」に化けることがある。実体参照を用いて指定した文字だけで同様の文字化けを起きることもある。 例示 <p style="font-family:'News Gothic MT',sans-serif;">CSSでデザイン</p>
em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) 2003-10-01修正。補足を追加。 症状 メニューの[表示→文字のサイズ]で文字サイズを変更すると、変更後にem単位で指定されたマージンなどが変更後の文字高さを正しく反映していない。 例示 こちらのページに例があります。 スクリーンショット 補足 font-sizeプロパティをem単位やex単位で指定した要素がネスト状態にあるとき、文字サイズを変更すると文字の大きさがばらばらになることがあります。例えば以下の例では文字サイズが「中」以外の場合、4つの文字のフォントサイズがすべて異なります。 <p>A <span style="font-size:1em;">B <span style="font-size:1em;">C <span style="font-size:1em;">D </spa
スタイルシートの解説・対応状況・バグ説明・回避法などを扱っているサイトへのリンクをまとめています。 ※「Netscape Communicator 4.7xが強制終了してしまうCSS」へのリンクを修正しました。(2004-08-23) W3C CSS1仕様書 CSS2仕様書 CSS2.1草案 CSS3概要草案 CSSモバイル1.0候補 水無月ばけらのサイト ばけらの CSS リファレンス CSS Laboratory とほほのWWW入門 とほほのスタイルシート入門 ZSPC CSS2対応状況ガイド TokiMeki Network SS Introduction [ Correspondence Condition of CSS ] - T.M.N. 三日坊主++の部屋 注意点,ブラウザ振り分け 文字化け対策 掲示板のOpera6に関するスレッド from DFJ ホームページ作成 ブラウ
ここではWinamp2とWinamp5で使用することができるプラグインと、役に立つ外部ソフトウェアを紹介します。なお、環境によってはこれらのソフトウェアが正しく動作しないことがあります。ソフトウェアのインストールや使用は自己責任でお願いします。 プラグイン関連サイト あんぷのかんづめ 古いバージョンのプラグインや日本語化パッチなどを公開。 Nullsoft Winamp関連 Uploader プラグイン、スキン、日本語化パッチなど用のアップローダ。 目次とカテゴリの解説 Inputプラグイン Winampで再生可能なメディア形式を拡張するプラグインです。Winampは標準で多くの形式に対応していますが、Inputプラグインを追加すればさらに多くの形式の再生が可能になります。 Outputプラグイン Winampからの出力方式を変更するプラグインです。スピーカ出力で聞く以
擬似要素名称の直後に空白類文字を置かないと擬似要素が認識されない(6.0) 2003-04-23修正。症状の変更。 2003-10-09修正。補足の変更。 症状 セレクタに :first-letter などの擬似要素を用いるとき、擬似要素名称の次(中括弧やカンマとの間)に空白類文字を置かないと擬似要素が認識されず、そのセレクタが無視されてしまう。 例示 <style type="text/css"> p.a:first-letter{ color:red; } p.b:first-letter { color:red; } </style> <p class="a">空白なし</p> <p class="b">空白あり</p>
clearを指定した要素ではフロートに対して上マージンを設置する(5.x/6.0) 症状 clearプロパティによってフロートとの隣接を抑制した要素に上マージンを指定すると、フロートの下に指定値分の幅の上マージンを設置する。 例示 <div style="float:left; width:3em; height:3em; margin:0; background:aqua;"> Float</div> <div style="clear:left; margin-top:1em; border:2px solid blue;"> Clear</div>
はじめに 「Winamp統合スレ」はWinampの話題やプラグインなどについて語る、2ちゃんねるWindows板内のスレッドです。そしてここは、スレッドの内容を元にFAQやお勧めプラグインなどをまとめたサイトです。 WINAMP.COM:Winamp公式サイト 最終更新:新スレを追加。(2004-08-07) Winamp統合スレ34 Winamp統合スレ33 Winamp統合スレ32 Winamp統合スレ31 Winamp統合スレ30 Winamp統合スレ29 Winamp統合スレ28 Winamp統合スレ27 Winamp統合スレ26 Winamp統合スレ25 Winamp統合スレ24 Winamp統合スレ23 Winamp統合スレ22 Winamp統合スレ21 Winamp統合スレ20 Winamp統合スレ19 Winamp統合スレ18 Winamp統合スレ17 Winamp統合スレ
ここにはWindows版Internet Explorer4.0以降(WinIE)のCSS/DOM実装バグの一覧があります。以下のリストからそれぞれのバグの詳細を見ることができます。 WinIEのCSS実装 WinIE6.0以降に「DOCTYPEスイッチ」が実装されています。DOCTYPE宣言により、W3Cが策定したCSS仕様に従う「標準モード」か、過去のUAに実装されていたCSS仕様に従う「互換モード」で解析・描画が行われます。 DOCTYPE宣言なし: 互換モード HTML3.2以前: 互換モード HTML4 Transtional/Frameset(システム識別子なし): 互換モード HTML4 Transtional/Frameset(システム識別子あり): 標準モード HTML4 Strict: 標準モード XHTML(XML宣言なし): 標準モード XHTML(XML宣言あり)
フロートの左右にある行の端がずれる(5.x/6.0) 2004-11-29修正。不具合の回避方法を追加。 症状 フロートの横に、フロートに重ならないようにマージンを設置したブロックボックスを置く(いわゆる段組)とき、ブロックボックスの行でフロートの左右に置かれるものは、ほかの行に比べて文字列の端がずれている。 例示 <div style="float:left; width:4em; border:2px solid red;"> Float<br>Float</div> <div style="margin-left:5em; padding:0; border:2px solid blue;"> ←<br>←<br>←<br>←<br>←</div>
次のページ
このページを最初にブックマークしてみませんか?
『CSSバグリスト@CSSバグ辞典スレッド』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く