X
CSS/DHTMLバグ辞典スレッド【第５版】
0005Name_Not_Found
垢版 |
2006/04/08(土) 21:16:02ID:???
Wikiでなくても、とにかく更新の止まった以降をの辞典登録を引き継いでくれれば嬉しい。
Wikiだと管理人以外が書き込めて、加筆修正もしやすいかな、ってだけ。
0006Name_Not_Found
垢版 |
2006/04/08(土) 21:24:32ID:???
どのへんから更新止まったんだっけ？
そういえば肝心なのが載ってなくておかしいな、とは思ったんだが。
0007Name_Not_Found
垢版 |
2006/04/08(土) 21:28:43ID:???
>スレッド第４版のレス314までを反映したリストです
と記述されているね。
0008Name_Not_Found
垢版 |
2006/04/08(土) 21:31:59ID:FsSaRr1T
>>6　
聞かなくても、問題のサイトを見れば更新履歴が出てるでしょ。
最終更新は、「2004-11-29」だと。
0009４
垢版 |
2006/04/08(土) 21:33:09ID:???
>>5
じゃあWikiかな・・
最終更新以降の報告、結構あるんですねぇ。
0010Name_Not_Found
垢版 |
2006/04/08(土) 21:38:39ID:???
整理すれば、新規バグはそんな沢山は無い筈。
牛歩でもいいから、進めてくれると助かる。
Wikiなら皆で手伝ってあげることもできるし。
0011４
垢版 |
2006/04/08(土) 23:54:53ID:???
>>10
うん、ありがとう。
PukiWikiを使うことにしたよ。今SKINをいじってます。
DNS浸透したら報告しますんで…
0013Name_Not_Found
垢版 |
2006/04/09(日) 04:31:42ID:???
別にPukiWikiでもいいんだけど、
各バグ項目が検索に引っかからないのではないかが、不安かな。
0015Name_Not_Found
垢版 |
2006/04/09(日) 14:58:12ID:???
そこは mod_rewrite と Wiki 内部のリンク方式のカスタマイズでなんとか出来ないか？
0016Name_Not_Found
垢版 |
2006/04/09(日) 15:31:40ID:???
>>14
モリタポか●を使えばDATを取得できると思う。
それをDAT2HTMLなどのツールを使ってHTML化して閲覧するとか…
0017Name_Not_Found
垢版 |
2006/04/09(日) 16:38:14ID:???
その、●とかモリタポとかってのを持ってる人、誰か居らんの？
0019Name_Not_Found
垢版 |
2006/04/10(月) 06:38:50ID:???
とりあえず置いてみる。wikiができれば消すつもり。
　ttp://with.her.jp/sonota/1078463560.html
0020Name_Not_Found
垢版 |
2006/04/10(月) 16:10:35ID:???
有り難う！　>>19
保存させて戴きましたので、消された後もお求めあらば提供致します。
0021Name_Not_Found
垢版 |
2006/04/14(金) 14:58:55ID:???
フロートに隣接する要素は親要素との間で上下マージンが相殺されない(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b172.html

どうやらフロートに関係なく発現する。
<div style="margin:0; border:0; padding:0; background:yellow; width:4em;">
<div style="width:2em; background:blue;margin:1em;">中</div>
<div style="margin:1em; background:aqua;">下</div>
</div>
cf. http://pc8.2ch.net/test/read.cgi/hp/1144504306/402-418
0022Name_Not_Found
垢版 |
2006/04/14(金) 15:18:46ID:???
>>21については、過去スレ第４版（>>19）の313〜318も要参照。
ややこしくてよくわからん。誰か整理して。
0023Name_Not_Found
垢版 |
2006/04/16(日) 15:17:37ID:ZzrK/yQF
>>11　DNS浸透って、大分時間が掛かるの？
0024４
垢版 |
2006/04/16(日) 18:15:11ID:???
すみません…、遅くなりました。
>>10
　 前スレの315から斜め読みしてみたけど、ホントに整理しないと
　 どれが新規のバグなのかよくワカラン。
>>15
　 mod_rewrite で実現できました。
　 リンクの参照先など不具合があれば報告よろしくです。

というわけでぬるぽ。
ttp://cssbug.paddin.com/
0025Name_Not_Found
垢版 |
2006/04/16(日) 20:39:31ID:???
>>24　有り難う、お疲れさま。

トップページの最下部「過去ログ」のことで質問。
倉庫格納されて見られない第３版と第４版の過去ログを参照可能にしたいんで、
そちらのサーバーにアップロードしてリンクを張れますか。
第３版は>>1に、第４版は>>19に、それぞれ保存先ＵＲＬが出てます。
0026４
垢版 |
2006/04/16(日) 22:12:41ID:???
>>25
ttp://cssbug.paddin.com/?plugin=attach&refer=Home&openfile=1050844510.html
ttp://cssbug.paddin.com/?plugin=attach&refer=Home&openfile=1078463560.html

DAT2HTMLを用いて読めるようにしました。
こんな感じでいいのかな。
0027Name_Not_Found
垢版 |
2006/04/16(日) 23:09:09ID:???

とりあえず新規に報告されたバグを抽出しないか？
0029Name_Not_Found
垢版 |
2006/04/16(日) 23:36:18ID:???
>>23
DNSに「浸透」なんて言葉を使う人間に聞き返しても無駄だと思うよ。
設定をする人間は最大でどのくらいかかるか断言できるから。
0030Name_Not_Found
垢版 |
2006/04/18(火) 23:10:19ID:???
<p><a href="http://www.2ch.net/">2ちゃんねる</a>へようこそ!!</p>

p:first-letter {
              margin-left: 1em;
}

Firefox 1.5でa要素にマウスカーソルを重ねるとmarginが無効になる。
仕様？
0034CSS質問スレッド55の947
垢版 |
2006/04/27(木) 13:27:44ID:???
33の補足です。

・MacOS10.4+safari2.0.1でも再現
・tableのセルが2行以上で、
　border:noneにしているセルを
　colspan属性で結合している状態だと再現できます
0035Name_Not_Found
垢版 |
2006/04/27(木) 17:23:17ID:???
>>34　
ソースと結果画面（スクリーン・ショット）と出しといてくんないかな。
33のリンク先は倉庫入りになるし。
0036Name_Not_Found
垢版 |
2006/04/28(金) 15:50:50ID:???
CSSで<img src="">の画像って指定できますか？
0037Name_Not_Found
垢版 |
2006/04/28(金) 15:54:45ID:???
>>36　ここは質問スレッドではない。少しは調べてから書け。
0038Name_Not_Found
垢版 |
2006/04/28(金) 17:12:50ID:???
多分、「CSS」とかで検索してここにたどり着いたんだろうな。
0039CSS質問スレッド55の947
垢版 |
2006/05/02(火) 14:19:12ID:5xPebMZu
【MacOS10.3.9+safari1.3.2】
tableのborderが、非表示を指定した箇所にまで表示されることがある。

環境：MacOS10.3.9+safari1.3.2
ソース：
css↓
table{border-collapse:collapse;}
td{border:1px solid}
td.noborder{border:none;}

html↓
<table><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td colspan="2" class="noborder">2-2+3 border:none;</td></tr>
<tr><td>3-1</td><td colspan="2" class="noborder">3-2+3 border:none;</td></tr>
<tr><td>4-1</td><td colspan="2" class="noborder">4-2+3 border:none;</td></tr>
<tr><td>5-1</td><td>5-2</td><td class="noborder">5-3 border:none;</td></tr>
<tr><td>6-1</td><td colspan="2" class="noborder">6-2+3 border:none;</td></tr></table>

キャプチャ：
(p)ttp://homepage3.nifty.com/catfood/up/src/up4881.gif
win2000sp4+firefox1.5.0.2のキャプチャ↓
(p)ttp://homepage3.nifty.com/catfood/up/src/up4880.gif

safariのほうは、5-3のtdの上下にborderが表示されてしまいます。

・MacOS10.4+safari2.0.1でも再現
・tableのセルが2行以上で、
　border:noneにしているセルを
　colspan属性で結合している状態だと再現できます
004039
垢版 |
2006/05/02(火) 14:59:38ID:5xPebMZu
キャプチャ落ちてた。。。すみません。
バグ辞典wikiに書き込んでみたので気になるところがあれば
じゃんじゃん訂正してください。
http://cssbug.paddin.com/
0042Name_Not_Found
垢版 |
2006/05/02(火) 21:32:17ID:???
>>40
GJ

そういえばwikiもできてたんだっけ。
そのwikiは既存のまとめサイトの内容を移したりしないん？
0043Name_Not_Found
垢版 |
2006/05/02(火) 21:56:36ID:xqHh1ncs
>>42
それは既存の分も移した方が、追記や修正もできていいんだけど、
作業が面倒だよ。手伝ってあげられるの？
0044Name_Not_Found
垢版 |
2006/05/02(火) 22:10:36ID:???
＞ 既存の分も移した方が、追記や修正もできていいんだけど
＞ 作業が面倒だよ。手伝ってあげられるの？

確かにそうだとは思うけどさ、その前に著作権の壁があるじゃないか。
004542
垢版 |
2006/05/02(火) 23:30:19ID:???
>>43
丸写しで良いならいくらでも手伝いたいが。
画像も含めて、あれ作るの相当労力要ったろうし、
勝手にやっていいものか分からん。
0046Name_Not_Found
垢版 |
2006/05/02(火) 23:37:04ID:???
中の人とコンタクトが取れるのかな？
ここ見ているなら幸いなんだけど・・・
0047Name_Not_Found
垢版 |
2006/05/03(水) 01:22:02ID:vVBSV98c
http://cssbug.at.infoseek.co.jp/index.html
↑「サイト全体を収録したアーカイブ」も配布してるし、
元は２ちゃんのスレッドなんだから、コピーレフトでいいんでないの？
0048Name_Not_Found
垢版 |
2006/05/03(水) 01:35:54ID:???
いまのwikiのスタイルだと、のちに修正が入って
それに伴ってタイトルも変更したくなった時は、困らないかな？
今でもＵＲＬが長すぎるけど。
２ちゃんねるで書き込むと「ＥＲＲＯＲ：長すぎる行があります！」になる。
http://cssbug.paddin.com/Safari%20%28KHTML%29/table%A4%CEborder%A4%AC%A1%A2%C8%F3%C9%BD%BC%A8%A4%F2%BB%D8%C4%EA%A4%B7%A4%BF%B2%D5%BD%EA%A4%CB%A4%DE%A4%C7%C9%BD%BC%A8%A4%B5%A4%EC%A4%EB%A4%B3%A4%C8%A4%AC%A4%A2%A4%EB.html
0049Name_Not_Found
垢版 |
2006/05/03(水) 01:37:15ID:???
アーカイブがあるので転載してもいい、というのはおかしいと思うよ。

あくまで個人で使う目的じゃないと駄目なわけで転載したら
普通に著作権の侵害。

2chの情報を元にして制作した「まとめサイト」でも結構著作権のハードル高いんだよね。
俺は専門的な知識がないので誰か詳しい人に聞きたい。
0050Name_Not_Found
垢版 |
2006/05/03(水) 01:41:28ID:???
まあ何だかんだ議論する前に、転載作業をやる気がある人が、
旧まとめサイトのアドレスにメールを出して許可を取るのが先だね。
それで音信不通だったら、またそのとき検討すれば。
0051Name_Not_Found
垢版 |
2006/05/03(水) 09:32:25ID:???
空気読まず何だかんだ言わせてもらうと
ttp://cssbug.at.infoseek.co.jp/detail/winie/b052.html と
ttp://cssbug.at.infoseek.co.jp/detail/winie/b078.html とかは
関連バグというよりは同じバグだよな。
もしWikiに移行するならそういうところまとめちゃってもいいんじゃないか？
0052４
垢版 |
2006/05/03(水) 14:19:24ID:???
>>48
確かにそうだね…orz
これはPukiWikiの仕様なんだけど、どうにかならないかな。
0053Name_Not_Found
垢版 |
2006/05/03(水) 14:39:27ID:???
>>48
例えば、ページ名は「Safari (KHTML)/バグ001」とかにして
そのページの最初のレベル1の見出しを
「tableのborderが、非表示を指定した箇所にまで表示されることがある」
のようにつけて、
各ユーザエージェントの目次のページは自作プラグインを使って一覧表示するようにすれば
ページ名も短縮できるし、目次もつくりやすくなるかなあ。
自作プラグインは、ls2_1を使って
&ls2_1(,title_number=1);
で、レベル1の見出しまで表示してくれそうな気ガス。

確認済みのバグと未確認のバグを分けるにはもう1階層必要かな？
そうすると未確認→確認済みに移動させるとき面倒？？
0054４
垢版 |
2006/05/03(水) 18:01:19ID:???
>>53
アドバイスありがとう。
なんとか title.inc.php というプラグインを自作できたよ。

書式は、「 #title(タイトル文字例) 」で大丈夫な筈…

不具合とかありそうな予感なんですが、試してみてください。
※これに伴い、いくつかのファイルをリネームしちゃいそうです。ご了承ください。
0055Name_Not_Found
垢版 |
2006/05/03(水) 18:37:21ID:???
で、Wikiへの移行はどうするんだい？
0057Name_Not_Found
垢版 |
2006/05/03(水) 19:07:11ID:???
>>54
プロパティー別に調べられる索引（>>1に挙がってるみたいな）と
連動できる体裁があるといいんだけど、難しいかな？
注文つづきで悪いけど、早いうちでないと後になってでは大変かもしれないから。
0058Name_Not_Found
垢版 |
2006/05/03(水) 19:22:55ID:???
>>57
それって普通に索引のページを新規に作ればいいんじゃﾏｲｶ？
0059Name_Not_Found
垢版 |
2006/05/04(木) 09:19:44ID:???
>>54
お疲れさま。
ＵＲＬをd20040809r335.htmlみたいにレスの日附と番号に拠ったものに変更したんですね。
すると、一つのレスで複数のバグを含む報告は、どうやって登録すればよいですか。
あまり細かいこと述べても煩瑣になりますが、凡例が要るかも？
0061Name_Not_Found
垢版 |
2006/05/05(金) 12:43:24ID:???
で、どう工夫すればいいって？　そこを記すのが凡例とかでしょ。
それと、旧まとめサイトの内容もwikiに移行して引き継ぐつもりなら
番号（ＵＲＬ）の振り方も同じにした方がよくない？　どうかな。
0062Name_Not_Found
垢版 |
2006/05/05(金) 16:53:54ID:???
>>61
ファイル名の付け方って難しいな。
もしリネームするなら恒久的なファイル名を付けたいし、何か良い案を考えないと。

というわけでよろしく>>63
0063Name_Not_Found
垢版 |
2006/05/05(金) 22:34:10ID:???
> ドキュメントの作成日 - URIが設定された日付 - は、まず変わることのないものの一つです。
> 古いシステムに対する要求と新しいシステムに対する要求を分離しておくことはとても有益です。
>
> これはURIのよい出発点でもあります。
> もしドキュメントが何らかの形で日付を持っているなら、たとえそれが先々まで
> 利用されるようなものであっても、日付はよい出発点になります。
（クールなURIは変わらない -- http://www.kanzaki.com/docs/Style/URI.html）

これを参考にして考えてみよう。

バグを発見、もしくは報告された日付を、バグ辞典に登録された登録日とすれば自然なURIになるんじゃないかな。
例えば [2006-05-10] にする。同日に複数の登録も考えられるので [2006-05-10_1] 、[2006-05-10_2] ...といった
感じで作れば結構恒久的なURIを設計できるはず。

件名による分類は避けるべきだと思うな。件名は後に変更される可能性があるからね。
0064Name_Not_Found
垢版 |
2006/05/05(金) 23:23:55ID:???
ややこしいな。旧まとめサイトと同じく、
ブラウザごとにb151.html、b152.html、……と作成順に数字振ればいいぢゃん？
0065Name_Not_Found
垢版 |
2006/05/05(金) 23:32:56ID:???
>>64
しかしそれだと、
b129.html
b130.html ←このファイルを削除した
b131.html

こういう場合困らないか？
0066Name_Not_Found
垢版 |
2006/05/05(金) 23:33:54ID:???
そのときは欠番になるだけじゃないか？
やはり管理しにくい？
0067４
垢版 |
2006/05/07(日) 00:59:16ID:???
>>63
ありがとう…。参考にします。
0069Name_Not_Found
垢版 |
2006/05/07(日) 06:04:30ID:1G7VNrSG
あと、そのwikiページにコメントが書き込めない。
「コメントの挿入」ボタンを押すと、HTTP404未検出になる。
0070Name_Not_Found
垢版 |
2006/05/11(木) 18:13:19ID:???
WinXPSP2 IE 6.0.2900.2180.xpsp_sp2_gdr.050301-1519

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><style type="text/css">
#overflow { overflow:auto; width:5em; height:5em; }
#overflow .rel { position:relative; }
</style></head>
<body>
<div id="overflow">
<p>あああああああああああああ
<p class="rel">いいいいいいいいいいいいい
<p class="rel">ううううううううううううう
<p>えええええええええええええ
</div>
</body>
</html>

position:relative要素がoverflow:autoを無視して固定配置に。
0071Name_Not_Found
垢版 |
2006/05/12(金) 02:17:56ID:MesSJCBJ
IEのDIVの上下の間が2倍になるバグの消し方を教えてください。
夜も眠れナイよ
0072Name_Not_Found
垢版 |
2006/05/12(金) 02:58:22ID:???
_margin -2px 0 0 -2px;
とか調子を見ながら適当にあわせるんだろうか？
0073Name_Not_Found
垢版 |
2006/05/12(金) 03:19:16ID:???
margin:0px;_margin:-5px
とかやったら随分直った、感動
0074Name_Not_Found
垢版 |
2006/05/19(金) 11:52:33ID:???
[MacIE 5.2.3]

症状：
letter-spacing に inherit を共存させるとクラッシュする

以下の環境で確認：
iMac G3 500MHz OS 10.3.9
iMac G5 1.8GHz Mac OS 10.4
Internet Explorer:mac 5.2.3 (5815.1)

具体例：
p {
letter-spacing:2px;
color:#000000;
background-color:inherit;
}
0075Name_Not_Found
垢版 |
2006/05/19(金) 20:17:00ID:JlmdytcT
letter-spacing より前に inherit があれば落ちないね。
よく見つけたというか、いまさら(ry
0077Name_Not_Found
垢版 |
2006/05/21(日) 18:05:23ID:9yn0XLyA
Mac版の Firefox や Camino で overflow:hidden が正しくレンダリングされない（隠れない）
けど、既出ですか？
0078Name_Not_Found
垢版 |
2006/05/25(木) 23:47:20ID:ASEtcgPJ
IEの、縦スクロールバーが出ると横スクロールバーも出るバグって、
スクロール固定表示以外に解決する方法はありませんか？
0079Name_Not_Found
垢版 |
2006/05/26(金) 00:28:15ID:???
縦スクロールバーが出ると横スクロールバーが出る？
0080Name_Not_Found
垢版 |
2006/05/26(金) 00:34:09ID:???
ミスってるだけでしょ。
ここ質問スレじゃないし。
0081Name_Not_Found
垢版 |
2006/05/29(月) 16:40:18ID:/oj7acLK
PHPでincludeすると、margin0にしても一行分間が開くのを回避できますか？
0084Name_Not_Found
垢版 |
2006/06/14(水) 03:23:48ID:Tpm/BNhV
Firefox 1.5.0.4です。

dd要素に、CSSでfirst-child疑似クラスとbefore疑似要素を使用し、
contentプロパティでの生成が上手くいかない
ちなみに以下みたいな感じでやってます

HTML
<dl id="list">
<dt>hoge</dt>
<dd>hogehoge</dd>
<dd>hogehoge</dd>
<dd>hogehoge</dd>
</dl>


CSS
dl#list dd:before {
　content: "|";
}
dl#list dd:first-child:before {
　content: "";
}

バグですかね？
0085sage
垢版 |
2006/06/14(水) 03:26:51ID:Tpm/BNhV
あ、dt要素があるからfirst-childはダメなのか orz
なんかいい方法ないですかね…

早くCSS3を・・・・
0086Name_Not_Found
垢版 |
2006/06/14(水) 04:53:15ID:???
・・・・やりたいことがわからんが、ddの一行目を差したいんじゃなくて、
一番目のddを示したい、んだよな？
だったらdtがあることを利用して隣接兄弟セレクタじゃダメなのか？
0087Name_Not_Found
垢版 |
2006/06/14(水) 04:56:33ID:???
>>86

IEの未実装の後遺症が・・・ぼけてた orz
それでおっけいでした、どうもでした

スレ汚し失礼しました
0088Name_Not_Found
垢版 |
2006/06/14(水) 13:32:25ID:???
ここは質問スレではないのだが・・・
0089Name_Not_Found
垢版 |
2006/06/16(金) 02:38:38ID:8F8c6HmC
シリア語ブラクラって行間が広くなるだけか？
0090Name_Not_Found
垢版 |
2006/06/20(火) 12:22:46ID:???
【OS】
　Win2k
【UA】
　Netscape Communicator 4.78
【症状】
　pre要素にborderを設定すると、整形済みテキストにならない。
【ソース】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd";>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title></title>
</head>
<body>
<pre style="border-width : 1px;">
あいうえお
かきくけこ
さしすせそ
</pre>
</body>
</html>
【表示結果】
┏━━━━━━━━━━━━━━┓
┃あいうえお かきくけこ さしすせそ ┃
┗━━━━━━━━━━━━━━┛
0091Name_Not_Found
垢版 |
2006/06/20(火) 12:42:44ID:???
そんなブラウザ切り捨てちまえ
0092Name_Not_Found
垢版 |
2006/07/14(金) 00:07:37ID:???
ttp://journal.mycom.co.jp/special/2006/ie7beta2/
IE7でもフロート関係はまだ問題が多いみたいだな。
0093Name_Not_Found
垢版 |
2006/08/10(木) 17:37:22ID:B8FGDLvr
先行独自実装込みだからちょっと迷ったが、legendやborderも関係するので一応晒す。

【環境】
Fx1.5.0.6 / Win2kSP4
【現象】
legendあり、border指定ありのfieldset要素で、-moz-border-radiusを指定すると、
上ボーダーが角丸として折れ曲がるところからしか表示されない。
【ソース】
<form action="#">
<fieldset style="border:solid 1px #f00;-moz-border-radius:10px;">
<legend>legend</legend>
<p><input type="submit" value="test"></p>
</fieldset>
</form>
【備考】
上記ソースでlegendないしborderプロパティを外すと再現せず。
【スクリーンショット】
ttp://mata-ri.tk/pic/img/4546.png
00941/2
垢版 |
2006/08/10(木) 18:25:56ID:B8FGDLvr
もう一つ。バグなのか仕様なのかわからないんだが。

【環境】
Fx1.5.0.6 / Win2kSP4
【現象】
table要素にborder属性及びborder-collapseプロパティにcollapseを指定した際、
border-collapseプロパティがseparateの時と違い自動でborderが描画され、
td（th）に対するborder設定が一部無視される。
【ソース】
<table border="1" summary="borderありテーブル" style="border-collapse:collapse;margin:1em;">
<tbody>
<tr><td>borderありcollapse</td><td>borderありcollapse</td></tr>
<tr><td>borderありcollapse</td><td>borderありcollapse</td></tr>
</tbody>
</table>
<table border="1" summary="borderありテーブル" style="border-collapse:separate;collapse;margin:1em;">
<tbody>
<tr><td>borderありseparate </td><td>borderありseparate</td></tr>
<tr><td>borderありseparate</td><td>borderありseparate </td></tr>
</tbody>
</table>
<table border="1" summary="borderありテーブル" style="border-collapse:collapse;collapse;margin:1em;">
<tbody>
<tr><td style="border:dashed 1px #f00;">borderありcollapse</td><td style="border:dashed 1px #f00;">borderありcollapse</td></tr>
<tr><td style="border:dashed 1px #f00;">borderありcollapse</td><td style="border:dashed 1px #f00;">borderありcollapse</td></tr>
</tbody>
</table>
00952/2
垢版 |
2006/08/10(木) 18:26:33ID:B8FGDLvr
<table border="1" summary="borderありテーブル" style="border-collapse:separate;collapse;margin:1em;">
<tbody>
<tr><td style="border:dashed 1px #f00;">borderありseparate</td><td style="border:dashed 1px #f00;">borderありseparate</td></tr>
<tr><td style="border:dashed 1px #f00;">borderありseparate</td><td style="border:dashed 1px #f00;">borderありseparate</td></tr>
</tbody>
</table>
<table summary="borderなしテーブル" style="border-collapse:collapse;collapse;margin:1em;">
<tbody>
<tr><td>borderなし</td><td>borderなし</td></tr>
<tr><td>borderなし</td><td>borderなし</td></tr>
</tbody>
</table>
【備考】
table＜tr＜tdという順でレイヤが上に重なるように描画されるイメージだと思ったから、
tableの方の指定が優先されるのはどうも納得いかないが、バグという自信もない。
【スクリーンショット】
ttp://mata-ri.tk/pic/img/4548.png
0096Name_Not_Found
垢版 |
2006/09/09(土) 21:17:32ID:???
>>30のバグ、p a:first-letterに同じプロパティを指定すると回避できるようですね。
解決済みでしたらすいません。
0097Name_Not_Found
垢版 |
2006/09/15(金) 23:47:00ID:XBNrNRLc
【環境】WinXPSP2 IE 7.0
【現象】親要素でmargin指定すると子要素のテキストボックス左に
　　　　親要素を継承したようなスペースが出来てしまう（ソース参照）。
【ソース】
●子要素でmargin指定<br>
<div style="width: 50px;margin-left: 30px;float: left;background-color: #CCCCCC;">
氏名
</div>
<div style="width: 150px;float: left;background-color: #F2F2F2;">
<input type="text" size="20">
</div>
<br clear="all">
●親要素でmargin指定すると、子要素のテキストボックス左に
親要素のmarginを継承したようなスペースが出来てしまう。<br>
<div style="margin: 0 30px;">
<div style="width: 50px;float: left;background-color: #CCCCCC;">
氏名
</div>
<div style="width: 150px;float: left;background-color: #F2F2F2;">
<input type="text" size="20">
</div>
</div>

これってIEのバグですか？（既出だったらｽﾏｿ）
inputタグの前に文字や画像を入れるとこの現象は起きません。
ちなみにMacIEなら大丈夫です。
0098Name_Not_Found
垢版 |
2006/10/12(木) 00:00:42ID:LJ/PIqgI
【環境】
Mozilla Firefox 1.5.0.7 / Windows 2000 SP4
【現象】
a要素内にcontent: url();でイメージを挿入したとき、イメージ上のハイパーリンクの挙動がおかしくなる。
【ソース】
<div>
<a href="./"><span>リンクテキスト</span></a>
</div>

a span:before {
  content: url(image.jpg);
}
a:hover span:before {
  content: url(image2.jpg);
}

画像に下からカーソルを入れると画像をリンク扱いしてくれますが、上から入れるとリンクになりません。なんだかよくわからない挙動になります。
a:beforeとして挿入しても同様です。
Opera9.02では、期待通りの動作をしました。
0099Name_Not_Found
垢版 |
2006/10/13(金) 15:00:01ID:3tCvV7ye
caption の水平方向の位置は、テーブルの横幅の範囲内にあるものだと思いますが
（cf. http://www.w3.org/TR/CSS21/tables.html#q5）
マックのブラウザ Camino1.0+ や Minefield 3.0a1 ではテーブルの横幅を無視して
body に対して相対的なようです。ウインドウズ版のモジラ系UAもそうなのでしょうか。
0101Name_Not_Found
垢版 |
2006/10/16(月) 06:41:02ID:Eif8KEeN
質問です（既出だったら済みません）。

【環境】Windows XPのNN7,IE6,Opera,FireFox

CSSで、<body>と<blockquote>にプロポーショナルフォントを指定しても
<blockquote>内にそれが適用されず、等幅フォントで表示されてしまいます。
さらには、明朝・serif系フォントを指定しても、
ブラウザのデフォルトのゴシック系のままです。
line-heightやbackground-color,marginの指定は反映されるようです。

他の<h*>や<p>などでマークアップした文章には
<body>で指定したフォントが反映されています。
分かる方、お願いします……
0102Name_Not_Found
垢版 |
2006/10/16(月) 07:05:35ID:???
>>101
仕様通りの動作です！

<pre>
PRE要素は、同等フォントで表示されます。
<b>太字要素</b>や<big>大きい文字要素</big>は無視されるはずです。
</pre>
0103101
垢版 |
2006/10/16(月) 07:39:39ID:???
>>102
そうか、ありがとう。
読みにくいけど仕方ないか。
0104Name_Not_Found
垢版 |
2006/10/16(月) 08:44:36ID:???
ここは質問スレじゃねえ。
答える大馬鹿、氏ね。
0105Name_Not_Found
垢版 |
2006/10/16(月) 21:29:28ID:???
過疎ッてるしいまの所はいいんじゃね。
104は責任とってバグを報告を活発にして盛り上げヨロ。
0106Name_Not_Found
垢版 |
2006/10/19(木) 22:55:48ID:f1R/djb7
質問です。
【環境】Win XP / Firefox1.5.x Opera8.x NN7.1
<div style="width: 800px; margin: 0px; padding: 0px; background: url(img/maincontents-bg.gif);">
<div style="width: 589px; margin: 0px; padding: 0px; float: left;">left</div>
<div style="width: 210px; margin: 0px; padding: 0px; float: right;">right</div>
</div>

親要素に背景画像を指定して、子要素にfloat属性があると、親要素の
背景画像が表示されません。

既出でつか？
背景画像で罫線を入れたいんです。
子要素の左右どちらかにborder属性を指定すれば良いのでしょうが、
ページによって左右の高さが変わるので、親要素の背景画像として
対応できればと思っています。
0107106
垢版 |
2006/10/19(木) 23:14:19ID:???
自己レスです。
親要素にheightを指定すれば良いみたいです。

んでも、子要素の高さはなり行きなんですよねー。
結局、子要素にborderをしていするしかないんですかねぇ。。。

皆さんはどうしてます？
0111Name_Not_Found
垢版 |
2006/11/03(金) 13:11:13ID:DjdfpzCM
>>107
親要素の:afterでclear: bothと、MacIEのみに適用するようにして親要素にdisplay: inline-tableと、バックスラッシュハックとスターハックを組み合わせてから親要素にheight: 1pxじゃなかった？
基礎だけど。詳しくは「"position is everything" float」でGoogleへ。
というか、質問スレじゃないだろ。答えてる俺が悪いんだが。
0112Name_Not_Found
垢版 |
2006/11/19(日) 09:38:50ID:3k+7zlXN
IE7です。

<ul><li><dl><dt>dt</dt><dd>dd</dd></dl></li>
<li><ol><li>li</li><li>li</li></ol></li></ul>

リストを入れ子にすると１行目(リストマーカーの右)に余白が空きます。


「li要素の子孫にリスト要素があるとリストマークが上方にずれる」
http://cssbug.at.infoseek.co.jp/detail/winie/b028.html


これと同様の現象だと思うんですけど、IE7では「補足」の方法では回避できません。
これ、バグだとすると、かなり致命的なバグだと思うんですけど…
0113Name_Not_Found
垢版 |
2006/11/20(月) 12:33:41ID:???
そう思っていればいいです。
0114Name_Not_Found
垢版 |
2006/11/20(月) 15:48:00ID:???
エラーログを見ていたのだけど、MacIE5がCSSの画像関係で物凄い数のエラーを吐いていたのね。
よく見てみると要求しているURLが、「CSSファイルのあるディレクトリ」+「画像指定のurl()のカッコ内の内容」になっていました。

http://cssbug.at.infoseek.co.jp/detail/macie/b021.html
上記URL先の場合だと、「/cssのあるディレクトリ/../images/hoge.jpg」と要求しているようです。

これを回避するにはcssのあるディレクトリ以下に画像を置いて、url(images/hoge.jpg) と記述するといいのでは？

（一応スレ内MacIE5で検索したのですが、ガイシュツでしたらすまそ。）
0115Name_Not_Found
垢版 |
2006/11/20(月) 15:56:37ID:???
114の文章力なさすぎで鬱。
MacIE5で指定した背景画像が表示されない問題についてです。
0116Name_Not_Found
垢版 |
2006/11/20(月) 18:02:55ID:???
>>115
＞MacIE5で指定した背景画像が表示されない問題
そんな問題が起こった事はないんだが。
どういう条件下なのかちゃんと書いてくれ。
0117Name_Not_Found
垢版 |
2006/11/20(月) 20:49:25ID:???
>>116
条件は「CSSのおいてあるディレクトリ以下にない画像を相対URLで指定した場合」、
「url('hoge.jpg')のようにコンマを入れた場合」です。（Mac持っていないので多分…）

/css/style.css
/images/hoge.jpg
という階層の場合、

background-image:url('../images/hoge.jpg');と記述しますが、
MacIEはサーバーにこの画像の場所を/css/'../images/hoge.jpg'　←カッコの中身そのまんま
と要求してくるため、画像が表示されないのかと…。

/css/style.css
/css/images/hoge.jpg
という階層にして、

background-image:url(images/hoge.jpg);と記述すれば、画像が出そうだなと。
まとめサイトに解決策がなかったので一応。
0118Name_Not_Found
垢版 |
2006/11/20(月) 21:07:31ID:???
「簡略化プロパティを認識しない。」とまとめサイトにあるので、
もしかしたら下のケースだけかもしれません。何度もすみません。

background-image:url('../images/hoge.jpg');
background:url('../images/hoge.jpg');
0119Name_Not_Found
垢版 |
2006/11/20(月) 21:21:41ID:???
それってこれも絡んでるんじゃないの
ttp://cssbug.at.infoseek.co.jp/detail/macie/b047.html
0120Name_Not_Found
垢版 |
2006/11/20(月) 21:43:45ID:???
>>119
なるほどー。では相対URLで指定してもダブルクォーテーションで囲んだ
場合はMACIE5なら認識しそうな感じがしてきました。ありがとん。
0121Name_Not_Found
垢版 |
2006/11/20(月) 22:48:26ID:???
>>120
認識しないって書いてあるよ。
大昔はいざ知らず、今は’も”も付けないのが普通なんだし、
ましてやﾕｰｻﾞｰでも無いのに、何大騒ぎしてんのさ。
0123Name_Not_Found
垢版 |
2006/11/21(火) 01:00:11ID:???
叩かれないようにって気をつけて書いたんだけど、
ヤッパリ叩かれてしまったなー。

エラーログが流れてしまうから、エラー吐かせたくなかったのね。
一応119には、『「MacIE4.5」はURIをダブルクォーテーションで
括った場合もこの指定を認識しない。』とあったから、MacIE5なら
OKだとおもただけだよ。結局は引用符つけない方法とったけどね。
0124Name_Not_Found
垢版 |
2006/11/21(火) 08:50:56ID:???
言い訳すればするほど泥沼
0125Name_Not_Found
垢版 |
2006/11/21(火) 13:52:42ID:???
ばかだからばかだといわれてるだけだ
0126Name_Not_Found
垢版 |
2006/11/25(土) 15:59:29ID:???
すいません質問ですが

ul.wisp li {
display: inline;
white-space: nowrap;
}

という記述のもと、
<ul>
0127126
垢版 |
2006/11/25(土) 16:04:09ID:???
という記述の元
<ul>
<li>***</li>
<li>***</li>
<li>***</li>
<li>***</li>
</ul>
というように書きました。

するとブラウザIE6にて、特定のウィンドウサイズにした際に****が表示されないときがあります。
コピペはできるので、テキストは存在するのですが、表示されなくなるようです。
これの原因か、もしくは解説しているサイトがあれば教えていただけないでしょうか。
0128Name_Not_Found
垢版 |
2006/11/25(土) 16:46:19ID:???
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ここは質問スレじゃありません
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
0129126
垢版 |
2006/11/25(土) 17:44:52ID:???
書き込んでから気づきました
本当にごめんなさい。
>>1見て、自分で色々やってみることにします。
どうも失礼しました。
0130Name_Not_Found
垢版 |
2006/11/26(日) 18:17:21ID:RyMdnqg/
こんにちは。CSS質問スレで誘導されたのでこちらに書き込みます。
IE6とFirefox2.0で下のHTMLを表示させると
IE6ではtableの高さがウィンドウサイズになり、
FFではtableの高さがdivの高さ=1600pxになるようですが、
CSSの仕様的にはどちらの挙動が正しいんでしょうか？ （UA依存？）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html style="height:100%">
<body style="margin:0px;height:100%">
<table style="height:100%" cellspacing=0 cellpadding=0>
<tr style="height:100%">
<td valign=middle>TEXT</td>
<td style="height:100%">
<div style="height:100%;overflow:scroll">
<div style="background-color:red;width:100px;height:1600px">RED BOX</div>
</div>
</td>
</tr>
</table>
</body></html>
0131Name_Not_Found
垢版 |
2006/11/26(日) 18:42:25ID:???
CSSスレ61の989だが、ここはあくまでバグを
報告する場であって質問をする場ではないよ。
報告されたのが本当にバグかどうかを検証するために
仕様書解釈の話をすることならあるかもしれないけど。
質問ならCSSスレのほうが適してるでしょ。
0132Name_Not_Found
垢版 |
2006/11/26(日) 19:45:12ID:???
　　　　　　　　　　, -ｪェェiiェェｪ-､
　　　　　　　　　 .l f＾''' ｰ - ‐ ''' ＾l i
　　　　　　　　　 l ,'　 　 ‐-‐　 　 ','!
　　　　　　　　　 | l　へ､‐-‐,.へ　l |　 質問には一切お答え出来ません････！
　　　　　　　　　 Lｌ -‐｡=,　'=｡‐,-.L|
　　　　　　　 　 ,.{ﾋ|　｀ ´|　|｀ ´　.|ﾋ}､
　　　　 ＿ ,. -‐|.`-l　/_〈＿〉_'､　!-’|ｰ- ､ ＿
　, -‐ ´ ＿ , -‐|.　 l. l‘-―‐-’! |　　|ｰ-　＿ ｀ ｰ-　、
i　|-‐　´　　　　|　　|｀ｰ- ﾆ - ‐' !　　|　　　　　｀　ｰ-|ヽ
!　|　　　　　　　|　　.|　　 ><　　 |　　 |　　　　　　　　|　 l
0133130
垢版 |
2006/11/26(日) 21:39:55ID:???
>>131 >>132
了解しました。。では当該スレに戻ります。お騒がせしました。
0134Name_Not_Found
垢版 |
2006/11/26(日) 21:48:03ID:???
>>133
変な誘導した奴がいかんのだろ。
61thの最後の方で一応回答しといたよ。
0135Name_Not_Found
垢版 |
2006/11/28(火) 23:05:10ID:???
WinのIE 7を含む全てのIEでのバグ

IEではsup, sub要素に font-size: 100% とすると
他のUAよりも小さくなる(実質、他のブラウザの83%くらい)

これは既知の事実だと思う

で、いったんfont-size: 100%とリセットした後、
再びsup, sub要素に font-size: 120% とすると　文字サイズが極端に小さくなる。
なぜか　119%　や　121%　だと通常通りになる

bodyのfont-sizeの定義にもよるようだ
IE7は　small IE5-IE6互換はx-small　にしている

この不可解なバグ　なんとかならないか
バグ辞典の２倍くらいのバグがあるんじゃないか
0136Name_Not_Found
垢版 |
2006/11/28(火) 23:13:25ID:???
ちょっと発現例がまださだかではないんだが、
とりあえず、Win IE 7では次のような場合に発現する

* {
font-size: 100%;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}

sub {
font-size: 120%;
}


<p>テストテストテストテストテスト</p>
<sub>テストテストテストテストテスト</sub>


sub の font-size を 120% 意外にすると、正常になる・・・・
0137Name_Not_Found
垢版 |
2006/11/28(火) 23:20:27ID:6LugNF8K
新バグ age
0138Name_Not_Found
垢版 |
2006/11/28(火) 23:23:28ID:6LugNF8K
新バグ age
0139Name_Not_Found
垢版 |
2006/11/28(火) 23:27:39ID:???
それ、バグだね

font-sizeごとにsubとsupの基準サイズが固定されてたと思う
0140Name_Not_Found
垢版 |
2006/12/01(金) 00:45:16ID:+YgXNA5N
imgタグが勝手にbugに置き換わるんだが

これはバグなのか？
0142Name_Not_Found
垢版 |
2006/12/05(火) 06:46:08ID:???
【環境】WinXPSP2 IE 7.0
【現象】XML 宣言とDOCTYPE 宣言の間にコメントを入れると
             セレクタが IE 6 相当になる？
【ソース】
●二行目のコメントの有無が子供セレクタの解釈に影響する

<?xml version="1.0" encoding="UTF-8"?>
<!-- IE 7 のセレクタを殺す -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="ja">
<head>
<title>てすと（セレクタが IE 6 相当になる？）</title>
<style type="text/css"><!--

body #test
{
  color: white;
  background-color: red;
}
body > #test
{
  background-color: green;
}

--></style>
</head>
<body><p id="test">てすと（セレクタが IE 6 相当になる？）</p></body></html>

標準モードか互換モードかは調べていませんが、
IE 7 はバグも進化しているようですね。
0143Name_Not_Found
垢版 |
2006/12/05(火) 07:21:11ID:???
sageちゃった。なので一応補足。

＊コメント行をとれば緑になる。ちなみに他のブラウザならコメント行があっても緑になる。
＊他のセレクタもこうなるのかは確認していない。
＊あと、IEの独自仕様については何も知らないので。
0144Name_Not_Found
垢版 |
2006/12/05(火) 10:04:26ID:???
>>142
IE独自仕様以前に文法違反。
XHTMLでstyleタグにコメント入れてどうするんだ。
0145Name_Not_Found
垢版 |
2006/12/05(火) 12:22:46ID:???
＞styleタグにコメント入れてどうするんだ
0146Name_Not_Found
垢版 |
2006/12/05(火) 12:38:46ID:???
>>142
それ単にQuirksモードになってるだけだろ。

IE6ではXML宣言もDOCTYPE宣言も「コメント」として扱い、
最初に登場する「コメント」の内容が特定のDOCTYPE宣言っぽかったら
Strictモードになるという処理だった。だからIE6でも
DOCTYPE宣言の前にコメントを入れればQuirksモードになる。

IE7では最初にXML宣言っぽいものが登場したらそれを
無視するようになったが、DOCTYPE宣言を「コメント」として扱い、
最初に登場する「コメント」の内容でStandardモードにするか
Quirksモードにするか決めるのは変わらないみたいだから、
DOCTYPE宣言の前にコメントを入れればQuirksモードになる。
0148Name_Not_Found
垢版 |
2006/12/05(火) 14:48:39ID:???
IEのバグより頭のバグを何とかしろと言う話か
0149142
垢版 |
2006/12/05(火) 18:47:42ID:???
>146
http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx

  >the new selectors only match in strict mode

IE 7 で実装されたセレクタは、IE 7 の互換モードだと無視されるんですね。

>144
>145
>147
外部スタイルシートにします。

>144-148
誤って私のバグを晒してしまいました。すれ違いですね。失礼しました。
0150Name_Not_Found
垢版 |
2006/12/05(火) 19:34:45ID:???
146の言うことを信じたのか・・・
0151Name_Not_Found
垢版 |
2006/12/29(金) 13:25:32ID:oUPuWBBr
IE6で・・・・

<div id="main">
<h2>Title 1</h2>
<ul>
<li>あああああ</li>
<li>いいいいい</li>
</ul>
</div>
と入力すれば・・・

Title 1
　・　ああああああ
　・　いいいいいい

となるはずなのに、IE6だと・・・

Title1

ああああああ
いいいいいい

となります。これはバグでしょうか。
XHTML 1.0 Strictです。
CSSを適用しなければ大丈夫です。
0152Name_Not_Found
垢版 |
2006/12/29(金) 14:01:56ID:???
> CSSを適用しなければ大丈夫です。

そりゃCSSがおかしいんだろ
ついでに言うとここは質問スレではありません。
バグかもしれないと思ったら検証してきてください。
0154Name_Not_Found
垢版 |
2006/12/29(金) 16:10:07ID:???
>>153
デフォルトがマージンかパディングかの違い、だったけ？
0156Name_Not_Found
垢版 |
2007/01/06(土) 02:29:56ID:OhGt25ov
もうIE死ねよ
オマエのバグには
うんざりだ
0157Name_Not_Found
垢版 |
2007/01/08(月) 14:36:04ID:???
お前の存在がバグだと言う事には気がついていない様だな
0158Name_Not_Found
垢版 |
2007/01/08(月) 21:13:19ID:3x4+siLD
ＤＩＶ要素に枠線つけて、
その中にＬＩ要素のリストを入れて、
行間を狭くしようと思ってＣＳＳで設定したら、
何故か枠線に繋がるような下線が引かれてしまいました･･･

<HTML><HEAD><TITLE>test</TITLE><STYLE TYPE="text/css">
<!--
DIV{
border-width:thin;
border-style:solid;
border-color:#000000;}
UL{
margin-bottom:-10px;}
LI{
margin-bottom:-2px;
}
--></STYLE></HEAD>
<BODY>
<DIV>
挨拶一覧
<UL>
<LI>おはようございます</LI><LI>こんにちわ</LI><LI>こんばんわ</LI><LI>おやすみなさい</LI></UL>
</DIV></BODY></HTML>

こうなってしまう理由はわからないのですが、
この問題は、ＤＩＶ要素の変わりにTABLE要素を使うことで、一応片付けています。
ＤＩＶ要素使えないのかな･･･？
0160Name_Not_Found
垢版 |
2007/01/17(水) 00:31:08ID:???
auのブラウザでフォントサイズの解釈がおかしい。
例えば、

<body>
<h1>見出し</h1>
<p>文章</p>
</body>

というHTMLにCSSで

h1,p{
font-size:100%;
}

と指定されているとh1要素もp要素も親であるbody要素と同じフォントサイズになるはずだが、
こいつは各々の要素のデフォルトフォントサイズを基準に解釈しているようで、
h1要素の方が大きく表示されてしまう。

Mobile Browser 6.2.0.10.4 (KDDI-HI36) Universal Edition
0162Name_Not_Found
垢版 |
2007/01/17(水) 01:40:01ID:???
携帯のCSS対応の不備をいちいち論ってたら本来のレスが埋もれるだろ
0163Name_Not_Found
垢版 |
2007/02/07(水) 16:54:29ID:BLWvQmet
em単位で指定した字間をbody要素の文字サイズを基準に算出する
ttp://cssbug.at.infoseek.co.jp/detail/winie/b109.html

に書いてある内容って本当にバグかね？

1emが

IE=半角
NN=全角

なだけでは？
全角計算が正しいなら、それはそれでバグだけど．．．
0164Name_Not_Found
垢版 |
2007/02/07(水) 16:55:59ID:???
バグなのか仕様なのか、よくわからなくなってきた。
0165Name_Not_Found
垢版 |
2007/02/07(水) 17:11:19ID:???
>>163
・・・・emは文字の「1文字分の高さ」。
だから全角だろうと半角だろうと関係ない。
0166シャープ
垢版 |
2007/02/07(水) 19:37:13ID:U37NdFNq

現在ＨＰを公開してるんですが
内容が企業秘密的な内容があるため
日本国内にいる人のみ見てもらえるようにしたいです
ですが、初心者なのでどのようにすればいいか分かりません
教えてください
0168Name_Not_Found
垢版 |
2007/02/08(木) 14:35:52ID:???
166
htmlに「日本国内にいる人のみ見てください。それ以外の人は帰ってください」
0169Name_Not_Found
垢版 |
2007/02/10(土) 11:55:03ID:???
>>166
初心者がそんな企業秘密事項を扱うなよｗ
あ、釣られちゃった？ｗ
0171Name_Not_Found
垢版 |
2007/02/22(木) 08:06:04ID:YRPYkgAP
めずらしくFirefox 2.0.0.1でのバグらしき動作
iframeのz-indexが効かない(実際にはJavaScriptで出力)

その他のプロパティは効くんだが
z-indexだけが無視される


<div style="position: absolute; z-index: 2; top: 0; left: 0; width: 100px; height: 100px;">
　ボックス１
</div>

<div style="position: absolute; z-index: 0; top: 20px; left: 20px; width: 100px; height: 100px;">
　ボックス２
</div>

<div style="position: absolute; z-index: 1; top: 40px; left: 40px; width: 100px; height: 100px;">
　ボックス３
</div>

<iframe src="〜" style="position: absolute; z-index: 3; top: 60px; left: 60px; width: 100px; height: 100px;">
</iframe>



この場合、iframeが一番上に来るはずなのになぜか一番下にくる
0172Name_Not_Found
垢版 |
2007/02/22(木) 08:13:39ID:???
すまそ

>>171のままでは発生しない
実際にはposition: relative; と absolute;を持つ要素が親にある

もう一度試してみるわ
0173Name_Not_Found
垢版 |
2007/02/22(木) 08:45:56ID:???
再現できた
iframeのz-indexがきかない
A, Bのoverflowを消すと効く


<div style="position: relative;">
　<div style="position: relative; width: 800px; height: 100px; background-color: #0f0;">
　 　ボックス2-1(緑)
　</div>

　<div style="position: absolute; top: 0; left: 0; width: 800px; height: 20px; background-color: #f00;">
　 　ボックス2-2(赤)
　</div>

　<div style="overflow: hidden; border: 4px solid #000; width: 800px;"> <!-- A -->
　 　<div style="overflow: auto;"> <!-- B -->
　 　 　<p>段落段落段落段落段落段落段落段落段落段落</p>

　 　 　<iframe src="〜" style="position: absolute; z-index: 9999; top: 0; left: 0; width: 100px; height: 100px;">
　 　 　</iframe>
　 　</div>
　</div>
</div>
0174Name_Not_Found
垢版 |
2007/02/22(木) 08:50:36ID:???
というか仕様通りか

FirefoxじゃなくてIEのバグだな
0175Name_Not_Found
垢版 |
2007/02/22(木) 08:58:15ID:???
絶対配置された要素もoverflowの対象なんだっけか？

Firefoxのバグじゃないか？

それとも仕様書には書いてないのか？
0177Name_Not_Found
垢版 |
2007/02/26(月) 15:24:43ID:???
これで再現できる。iframeは関係ないな。
<div style="position:relative">
<div style="background:blue; position:relative; border:4px solid blue; width:400px; height:200px">
blue box
</div>
<div style="overflow:hidden; border:4px solid red; width:400px">
<div style="background:green; z-index:9999; position:absolute; top:0; left:0; width:100px; height:100px">
green box
</div>
</div>
</div>
0178Name_Not_Found
垢版 |
2007/03/01(木) 16:05:43ID:???
Opera9でvertical-align:text-bottomを指定すると、親ボックスが縦に長くなる。
これってバグだよね。
<div style="font-size:30px; border:1px solid red">
SAMPLE
<span style="vertical-align:text-bottom; font-size:10px;border:1px solid blue">SAMPLE</span>
</div>

0180Name_Not_Found
垢版 |
2007/03/21(水) 18:26:20ID:???
>>179
なぜ？CSS 2とCSS 2.1で定義が違うみたいだが、どっちにしても>>178のソー
スで親ボックスが拡張されるとは考えられないんだが。

CSS 2
> Align the bottom of the box with the bottom of the parent element's font.
http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align

CSS 2.1
> Align the bottom of the box with the bottom of the parent's content area
http://www.w3.org/TR/2006/WD-CSS21-20061106/visudet.html#propdef-vertical-align
0181Name_Not_Found
垢版 |
2007/03/21(水) 18:28:53ID:???
paddin.comの中の人いる？サーバは落ちてるだけ？
0182Name_Not_Found
垢版 |
2007/03/22(木) 00:14:35ID:???
既出かもしれんが、Firefox 2.0でbody要素のボックスの下に謎の空白が出現
するバグを確認。

<body style="border: 4px solid red; padding: 0">
<div style="border: 4px solid blue">
<p>TEST</p>
</div>
</body>
0183Name_Not_Found
垢版 |
2007/03/22(木) 01:36:00ID:???
>>182
2.0.0.3で何も問題がない。
つーかbody要素のボックスの下って何。
0186182
垢版 |
2007/03/22(木) 20:47:39ID:???
ごめん、ユーザースタイルシートが原因だった。スレ汚しすまん。
0187Name_Not_Found
垢版 |
2007/03/27(火) 23:57:27ID:???
186 名前：182[sage] 投稿日：2007/03/22(木) 20:47:39 ID:???
ごめん、ユーザースタイルシートが原因だった。スレ汚しすまん。
186 名前：182[sage] 投稿日：2007/03/22(木) 20:47:39 ID:???
ごめん、ユーザースタイルシートが原因だった。スレ汚しすまん。
186 名前：182[sage] 投稿日：2007/03/22(木) 20:47:39 ID:???
ごめん、ユーザースタイルシートが原因だった。スレ汚しすまん。

ｍ９(＾д＾)ﾌﾟｷﾞｬｰ
0188Name_Not_Found
垢版 |
2007/04/03(火) 12:45:26ID:vB53BTFD
【Firefox2.0.0.3】
代替スタイルシートを変更し続けていると
たまにfirst-letter擬似要素の設定が無視される。
検証要素：h1:first-letter - color, fint-size, font-family
0189Name_Not_Found
垢版 |
2007/04/11(水) 10:23:16ID:???
>>188
h1:first-letterにcolorプロパティを設定して代替スタイルシートの切り替えを
50回やってみたけど再現しなかったよ。

Mozilla/5.0 (X11; U; Linux i686; ja; rv:1.8.1.3) Gecko/20060601 Firefox/2.0.0.3 (Ubuntu-edgy)
0190Name_Not_Found
垢版 |
2007/04/12(木) 12:26:14ID:???
XPのFx2.0.0.3で逆にfirst-letterの指定が
その後のブロック要素閉じ部分まで設定されてたことが
0191Name_Not_Found
垢版 |
2007/04/12(木) 17:32:22ID:???
>>188
再現できた。しかし、どういう状況で再現するのかが分からん。
0192Name_Not_Found
垢版 |
2007/04/12(木) 21:40:19ID:???
たまに、ということだったらAPIかもしれんね。
Fxも昔からhover関係のfirst-letterは修正されてないから
まだバグ持ちなのかもしれないけど。
0193Name_Not_Found
垢版 |
2007/04/14(土) 03:43:05ID:qujLZiyY
http://cssbug.at.infoseek.co.jp/detail/winie/b032.html
このバグがXPの6.0.2900.2180ではなくなってる。いつのまになくなったのかはわからない。
2000の6.0.2800.1106ではまだ起こってる。但し
消えた文字の部分を何度か選択するアクションを取ると文字が出る。意味不明。
0195Name_Not_Found
垢版 |
2007/04/14(土) 22:42:20ID:???
マジ？　xpsp2だよ。
他の人も頼んます・・・orz
0198Name_Not_Found
垢版 |
2007/04/15(日) 10:11:27ID:???
書き忘れたけど、IEのバージョンは6.0.2800.1106
0199193
垢版 |
2007/04/15(日) 13:42:11ID:???
一人バグ対処ということで下げます・・・どうもですorz
でも出ねえええええええ！
0201Name_Not_Found
垢版 |
2007/04/15(日) 14:22:45ID:???
>>200
zoomって何かと思ったらIE独自拡張CSS？ユーザCSSで使うとバグが出るようになるのか？
ていうか回避して何？すまんわからん。
俺は「そのバグが出ない」と言ってるだけだが・・・
0202200
垢版 |
2007/04/15(日) 14:32:47ID:???
>>201
あぁスマンそういうことか
そもそもそのバグ、再現性100%じゃないからなぁ
一時的に直ったように見えてるだけかと思われ
0203Name_Not_Found
垢版 |
2007/04/15(日) 14:42:13ID:???
>>202
いや、さすがにここに書き込む前に100回は確認したし
CSSも書いてみたけどｗ
一時的なのかなあ・・・
0204Name_Not_Found
垢版 |
2007/04/15(日) 14:53:04ID:cgXeK4yB
【WindowsXP HomeEdition SP2】
【Firefox2.0.0.3】
【Adobe Reader7.0】
Fxで「スタイルシートを使用しない」すっぴん状態にする
→HTMLからのリンク先のPDFファイルにアクセスする
→リーダーが最小の状態（？）で現れ、文書が読めない。
0205Name_Not_Found
垢版 |
2007/04/15(日) 15:25:42ID:???
そんな特定のソフトの話されても
0206Name_Not_Found
垢版 |
2007/04/15(日) 15:36:05ID:???
９条は改憲してはならない。日本の為にならない。
日本人ではない朝鮮総連や民団でさえ、日本を心配して改憲への反対運動を行ってくれている。
私は日本人だが、「改憲すべき」などという者は、日本人として彼らに恥ずかしいと思います。

Ｑ．中国から身を守る為、戦争に対する抑止力が必要では？
Ａ．前提から間違っています。そもそも、中国は日本に派兵しようと思えばいつでもできました。
　　なぜなら、日本には９条があるため、空母や長距離ミサイル等「他国を攻撃する手段」がない。
　　つまり日本に戦争を仕掛けても、本国の、命令をだした幹部の命は絶対に安全なのです。
　　「安心して戦争を仕掛けられる国」を、中国は、今まで攻めずにいてくれたのです。

Ｑ．それは日米安保によるものでは？　そして、その日米安保も絶対ではないのでは？
Ａ．中国の良心を信じられないのはなぜですか？　そして、日米安保は絶対です。
　　知り合いの韓国人の評論家も「絶対だ」と言っていますし、私も同じ考えです。
　　更に、９条が消えても米国の戦争に協力する義務は発生しませんが、米国が被害者の場合は別です。
　　米国は日本を守る為に戦っても、（９条があれば）日本は米国を守る為に戦う必要がないのです。

Ｑ．９条が本当に「平和」憲法なら、世界中で（日本以外に）１国も持とうとしないのはなぜか？
Ａ．これは、日本以外のすべての国が誤っているとも言えます。
　　「敵国に攻撃が届く国は攻められづらい」というのは、誤った負の考え方です。
　　（もっとも韓国や中国の軍に関しては、日本の右傾化阻止の為でもあるので例外ですが）
　　更に日本の場合、隣国が韓国・中国・ロシアと、GDP上位の安定した信頼できる国ばかりです。

Ｑ．「９条改憲派」は「戦争反対派」。侵略者に戦争を挑発する戦争憲法（９条）を撤廃したいのです。
Ａ．それは、貧しい考え方ではないでしょうか？
　　中国や北朝鮮を信じる「強さ」があれば、そんな考えにはならないはずです。
　　日本が信じれば、彼らも信じるでしょう。そして、真に美しい関係が始まるのです。
0207Name_Not_Found
垢版 |
2007/04/15(日) 15:46:48ID:???
>>205
CSSを切ると表示されなくなるということは
内部CSSでそれの領域を確保しているのがおかしくなるということだと思いますが。
通常概念的にはスタイルシートの無視は制作者CSSだけの無視で
Fxの場合は内部で使用しているCSSをOFFにされては問題が起こると思うので
内部のCSSまでは切らないと思われますし実際切れていませんが、
それが一部アプリケーションとの連動では失敗している臭いという意味です。
>>1を見る限り制作者CSS限定のスレでもなさそうですが、違いますか？
0208Name_Not_Found
垢版 |
2007/04/15(日) 16:05:13ID:???
>>207
ブラウザアプリから他のアプリケーションを呼び出すという行為は、
OS依存であり、そのような事象をいちいちバグと呼んでいたらキリがありません。
PC板もしくはソフトウェア板で議論すべきと思われますが、違いますか？
0209Name_Not_Found
垢版 |
2007/04/15(日) 16:08:45ID:???
>>208
表示させてるのはFirefox（のCSS？）なんだからここでもいいと思うが。
対処は絶対に出ないタイプだな。
0210Name_Not_Found
垢版 |
2007/04/15(日) 16:11:36ID:???
>>209
だいたいPDFなんてweb制作と関係ないだろ。
うp出来るってだけならテキストだってうp出来る。
0211Name_Not_Found
垢版 |
2007/04/15(日) 16:18:51ID:???
>>208>>210
PDF自体の問題ではなくてではなくてPDFを表示させたあとのサイズを
CSSで処理してんじゃないのかという話です。
呼び出す部分も関係なく、純粋に表示の話をしています。
0213Name_Not_Found
垢版 |
2007/04/15(日) 16:40:00ID:???
>>204
バグは確認できたがこのスレとはあまり関係がないんでは…
このスレではCSSが仕様通りに解釈されないようなケースを扱うんであって、
ソフトウェアの誤動作みたいなのはスレ違いだと思う。
0214Name_Not_Found
垢版 |
2007/04/15(日) 16:59:41ID:???
>>213
前も内部CSSみたいなの出てなかったっけ？
まあどっちにしても処理がわからないブラックボックスだからちと困るが。
0215Name_Not_Found
垢版 |
2007/04/15(日) 18:13:09ID:???
ユーザCSSなら出てたが・・・
0216Name_Not_Found
垢版 |
2007/04/18(水) 11:10:18ID:???
>>93のバグだが、2.0.0.3で
legendにも-moz-border-radiusを指定すると、
fieldsetの角丸borderはまともに描画されることがわかった。
一応対処法・・・か？
0217Name_Not_Found
垢版 |
2007/04/19(木) 01:03:31ID:???
どうでもいいけど
バグ辞典更新しないの？

流れてくのもったいないな
0218Name_Not_Found
垢版 |
2007/04/19(木) 10:17:35ID:sk4uGgDP
【CSSバグリスト＠CSSバグ辞典スレッド】
http://cssbug.at.infoseek.co.jp/index.html
　＞＞＞（もうずっと更新休止、誰かwikiででも引き継がないか？）
0219Name_Not_Found
垢版 |
2007/04/19(木) 10:48:50ID:???
前スレで新らしく作ってくれた人いるよ。
でも旧サイトから転載するには許可がいるんだろうし、
旧サイトの管理人さん音信不通でそれっきり。
0221Name_Not_Found
垢版 |
2007/04/20(金) 01:36:35ID:???
引き継いでくれてたんだな
なくなっちゃたのか…

新しいブラウザとかsafariとかのmac関係のバグとか
まとめがあったらいいよなあ

ボランティアでやるのはたしかに大変だとはおもうけど…
0222Name_Not_Found
垢版 |
2007/04/20(金) 02:58:34ID:???
IE6 SP2を入れただけで、パッチを一切当てない状態で
onmouseoverでdocument.body.style.cursor = 'pointer'とすると
他のdivがめたくそに色が変わっちゃうのってガイシュツですか？

つか、MSやっぱ死ね。(´Д⊂ヽ
0223Name_Not_Found
垢版 |
2007/04/20(金) 04:21:10ID:???
うちのサーバでWikiを立ち上げてもいいんですが、綺麗なHTMLソースを吐く
Wikiってありますかね。FreeStyleWikiとかくらい？
0224Name_Not_Found
垢版 |
2007/05/04(金) 04:30:46ID:???
colgroup要素にbackground-colorプロパティは適用されるのにcolorプロパティ
は適用されないのって仕様？Fx2とOpera9は同じようにレンダリングした。

<table>
<colgroup style="color:red; background-color:silver"></colgroup>
<tbody>
<tr>
<td>a</td>
</tr>
</tbody>
</table>
0225Name_Not_Found
垢版 |
2007/05/04(金) 12:37:24ID:???
>>224
ttp://www.y-adagio.com/public/standards/tr_css2/tables.html#q4
0227Name_Not_Found
垢版 |
2007/05/24(木) 02:23:45ID:???
IE6以下において
hover状態でa要素の子孫要素に対して変化させようとするとき、a要素にcolorを指定すると変化しない。
IE7、Netscape7.2、Firefox2.0.0.3、Opera9.20では問題なく変化する。

a:link span, a:visited span {
background-color: red;
border: 1px solid black;
}
a:hover span {
background-color: yellow;
border: 3px double green;
}
a:active span {
background-color: red;
border: 1px solid black;
}


<div>
<a href="a.html"><span>a要素へのcolor指定なし</span></a>
</div>
<div>
<a href="b.html" style="color:blue"><span>a要素へのcolor指定あり</span></a>
</div>
0228Name_Not_Found
垢版 |
2007/05/24(木) 02:56:32ID:???
>>227

バグだね
対策法は親要素(a:hover)で背景色を明示すると直る
0229Name_Not_Found
垢版 |
2007/05/27(日) 15:30:42ID:???
ていうかとっくに既出だと思ってたが。
0232230
垢版 |
2007/05/31(木) 23:21:52ID:???
Wiki設置したついでに、自分が前に発見したバグっぽいものを報告しときます。

● [Firefox2]:first-letter疑似要素にtext-decoration:underlineを指定す
ると、下線の位置がおかしい

<div>underlined text</div>
div, div:first-letter { text-decoration: underline }

:first-letter疑似要素の下線の位置が下にずれる。overlineなどを指定して
も同じ。

● [IE7]:first-letter疑似要素にtext-decoration:noneを指定すると、下線
が消える

<div>underlined text</div>
div { text-decoration: underline }
div:first-letter { text-decoration: none }

:first-letter疑似要素の下線が消える。

● [IE7]:first-letter疑似要素を含むセレクタの詳細度が正しく計算されない

<div>
<h1>TEST</h1>
</div>

h1:first-letter { color: red }
div h1:first-letter { color: blue }

一文字目が赤くなる。
0233230
垢版 |
2007/05/31(木) 23:25:52ID:???
● [Opera9] tr:before { content: "" }とすると、背景が1列分ずれる
<table>
<colgroup class="a"></colgroup>
<colgroup class="b"></colgroup>
<colgroup class="c"></colgroup>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</tbody>
</table>

tr:before { content: "" }
colgroup.a { background: green }
colgroup.b { background: blue }
colgroup.c { background: red }

自分の環境で確認しただけなので、誰か検証お願いします。
0234230
垢版 |
2007/06/06(水) 22:48:22ID:???
>>53-54で話題になっているようなPukiWikiのプラグインって、どこかで手に
入らないでしょうか。今のままだとページ名が長すぎたり、ページ名に「:」
が含まれていたりするとエラーになってしまいます。paddin.comの中の人が見
ていたらぜひ譲ってほしいんですが…。
0235Name_Not_Found
垢版 |
2007/06/07(木) 16:22:16ID:???
paddin.comのひと、見てなさそうだよねえ。
忘れた頃に帰ってきそうな気もするけど。
0236230
垢版 |
2007/06/07(木) 21:26:50ID:???
後にそいういうプラグインができることにして、とりあえずページ名は
「20070607n01」みたいに日付+番号で管理するようにしたいと思います。
誰かプラグイン書いてくれないかなぁ。
0237Name_Not_Found
垢版 |
2007/06/08(金) 14:25:36ID:???
ttp://www.uploda.net/cgi/uploader4/index.php?file_id=0000014462.zip
暇なので空気を読まずに適当に作ってみた。マトモに動くかどうか不明。
0238Name_Not_Found
垢版 |
2007/06/09(土) 00:36:56ID:???
このスレで出たバグで、自分の環境では確認できなかったものをまとめておき
ました。
http://mynotes.jp/blog/2007/06/cssbugdict5_memo
Wikiにまとめるのはモダンブラウザのバグだけでいいですかね？

>>237
今のスキンだとh1要素が全部「CSSバグ辞典 Wiki」になっているから使えない
かな…
0239237
垢版 |
2007/06/09(土) 04:27:27ID:???
>>238
説明足りんかった。
レベル1の見出しってのはh1要素じゃなくて、ソース中で『*』1個で始まる行のことです。
整形結果ではh3要素になるのかな。

ttp://mynotes.jp/cssbug/?Firefox%2F20070607n01
↑ここで言うなら『代替スタイルシートを変更すると:first-letter疑似要素に(ry』がそれのはず。
0240Name_Not_Found
垢版 |
2007/06/09(土) 21:10:15ID:???
>>239
あー、なるほど。これならバグリスト一覧ページを出力するのに使えそう。
0241Name_Not_Found
垢版 |
2007/06/09(土) 23:50:28ID:???
バグの概要をページ名に含めちゃうと、詳細条件がわかったときに
ページを移動しなくちゃならないとかになるかもしれないから、
今のように機械的なページ名のほうがいいかもね。
0242Name_Not_Found
垢版 |
2007/06/12(火) 21:55:13ID:???
Safari 3.0 betaバグ？ (WindowsXP)

・document.styleSheets コレクションに 'alternate stylesheet'を含まない。
対策方法 :GetElementsByTagName()等から link要素 rel属性をサーチ
(stylesheet|alternate stylesheet)して、styleSheets配列を擬似的に生成する。

・font-family に 日本語のフォントスタイル名(2バイト文字)を指定すると無効。
対策:1バイト文字のフォント名である 'MS UI Gothic'や、'Osaka'等を指定する。
0243Name_Not_Found
垢版 |
2007/06/13(水) 00:40:30ID:???
>>242
>・font-family に 日本語のフォントスタイル名(2バイト文字)を指定すると無効。

それは昔から
0244242
垢版 |
2007/06/13(水) 01:08:55ID:???
>>243
thx. 昔から治ってないのですか..。

CSSを UTF-8でエンコードしてやっても駄目だったので、Unicodeの
マルチバイトコードのサポートが失敗するなんてアホかと思いました。
まあ現状のままだと、多くのWindowsユーザーからの膨大なトラックバック
(=苦情)が来てそのへんの挙動も改善するかもしれないですね。
0245Name_Not_Found
垢版 |
2007/06/13(水) 13:27:00ID:AmSLa4Zs
IE 7 しょぼすぎ
どうやら MS は技術者と呼べるレベルの人材がいないようだね
0246Name_Not_Found
垢版 |
2007/06/14(木) 02:31:11ID:???
Safari3は正式版がリリースされるのを待ったほうがよさそうだね。
0248Name_Not_Found
垢版 |
2007/06/14(木) 15:18:41ID:???
ところで新Wikiってさ、最近更新されたページの一覧とかないの？
0252251
垢版 |
2007/06/20(水) 16:14:29ID:???
日本語フォントを1番目に指定すれば化けなかったスマン
しかしそうすると欧文フォント指定できなくなるな参った
0253Name_Not_Found
垢版 |
2007/06/20(水) 16:21:44ID:???
そんな記号使わんから問題なし
0255242
垢版 |
2007/06/23(土) 12:04:37ID:???
Safari の日本語のフォントスタイル名(2バイト文字)が指定できないバグは、
3.0.2 beta で修正されたようです。意外と対応が速かったですね。
0256Name_Not_Found
垢版 |
2007/06/23(土) 18:46:55ID:???
>>255

４，５年のうちは1バイトで書かないとだめだろうけどなー
0257Name_Not_Found
垢版 |
2007/06/23(土) 21:05:35ID:???
つーかSafariはデフォフォントが綺麗だから
指定する気になれないなー。
0258Name_Not_Found
垢版 |
2007/06/26(火) 22:29:32ID:???
| それは昔から

って、1.x の正式版以降 2.x までずっとだいじょうぶなんだが。
0259Name_Not_Found
垢版 |
2007/06/27(水) 00:48:03ID:???
>>258
>>・font-family に 日本語のフォントスタイル名(2バイト文字)を指定すると無効。
>って、1.x の正式版以降 2.x までずっとだいじょうぶなんだが。

2でもおかしかった気がするけど？

Safariはマルチバイト文字の処理に弱いからねえ
3はマシになりそうだね
良い感じ
0260Name_Not_Found
垢版 |
2007/06/29(金) 23:43:20ID:???
Safariのバグ

<div class="nav">
　<ul>
　 　<li>
　 　<li>
　</ul>
</div>


div.nav { position: relative; }
div.nav ul { margin: 0; padding: 0; position: absolute; right: 0; top: 0; }
div.nav li { margin: 0 4px; }


absolute配置した要素の子要素?(リストの場合のみ？)に水平marginがあると、
ボックスサイズが文字の幅より小さく表示される
(結果、文字が２行に折り返される)
0261Name_Not_Found
垢版 |
2007/06/29(金) 23:44:01ID:???
あ、ｽﾏｿw
ソースは↓の間違いね

<div class="nav">
　<ul>
　 　<li>リスト</li>
　 　<li>リスト</li>
　</ul>
</div>
0262Name_Not_Found
垢版 |
2007/06/29(金) 23:49:13ID:???
何度もｽﾏｿｗ

CSSも間違ってた

<div class="nav">
　<ul>
　 　<li>リスト</li>
　 　<li>リスト</li>
　</ul>
</div>

div.nav { position: relative; }
div.nav ul { margin: 0; padding: 0; position: absolute; right: 0; top: 0; }
div.nav li { margin: 0 4px; padding: 0; display: inline; }


absolute配置したリストの子のli要素をインラインボックスにしてる場合になるみたいだ。
リストマーカー関連のバグかな。ちなみにli要素の内容が英数字でも発生。
0263Name_Not_Found
垢版 |
2007/07/02(月) 05:07:12ID:???
>>262
Windows XP + Safari 3.0.2では発生しなかった。
OSとSafariのバージョンは？
0264Name_Not_Found
垢版 |
2007/07/02(月) 05:13:17ID:???
>>263

Win+Safari 3.0.2だねえ
ちなみに、floatのクリアはdiv.nav:afterの内容生成でclearしている

もうちょいテストしてみる
0265Name_Not_Found
垢版 |
2007/07/02(月) 20:22:57ID:???
>>264
>float
>>262のソースコードにフロートはなさそうなんだけど？
0266Name_Not_Found
垢版 |
2007/07/03(火) 19:48:32ID:???
某掲示板で質問されてたやつだけど原因が分からない。これってIEバグ？
ttp://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=690
(float:leftに後続するiframeにwidth:80%を指定していると右端が切れる)
右ボーダーまで消えちゃってる(リサイズすると出る)。
0267Name_Not_Found
垢版 |
2007/07/03(火) 20:01:02ID:???
それ以前にそんなサイト参考にすんな
0268Name_Not_Found
垢版 |
2007/07/03(火) 21:00:48ID:???
【環境】Firefox 2.0.0.4
【症状】:after疑似要素にdisplay:blockを適用して絶対配置にすると、包含
ブロックの高さが疑似要素の生成するボックスを含めるように引き伸ばされる
【ソース】
div
{
border: 1px solid blue;
width: 200px; height: auto;
}
div:after
{
border: 1px solid red;
width: 100px; height: 100px;
position: absolute;
display: block;
content: " ";
}

<div>
テスト
</div>
0269268
垢版 |
2007/07/03(火) 21:04:22ID:???
訂正
【症状】:after疑似要素にdisplay:blockを適用して絶対配置にすると、親要
素のボックスの高さが疑似要素の生成するボックスを含めるように引き伸ばされる
0270268
垢版 |
2007/07/03(火) 21:12:44ID:???
検証してみたところ、これが原因みたい。
【環境】Firefox 2.0.0.4
【症状】display:blockを適用した:before/:after疑似要素を絶対配置にする
ことができない
【ソース】
div
{
border: 1px solid blue;
width: 200px; height: 200px;
position: relative;
}
div:before
{
border: 1px solid red;
width: 100px; height: 100px;
position: absolute;
right: 0; bottom: 0;
display: block;
content: " ";
}
0271268
垢版 |
2007/07/03(火) 21:14:46ID:???
もう一つ。
【環境】Firefox 2.0.0.4
【症状】:before/:after疑似要素をフロートにすることができない
【ソース】
div
{
border: 1px solid blue;
width: 200px; height: 200px;
position: relative;
}
div:before
{
border: 1px solid red;
width: 100px; height: 100px;
display: block;
float: right;
content: " ";
}

<div>テストテストテストテストテストテストテストテストテストテスト</div>
0272Name_Not_Found
垢版 |
2007/07/04(水) 09:36:49ID:???
【環境】Firefox 2.0.0.4
【症状】address要素内で、a要素の文字の大きさが反映されない。
【ソース】
<head>
<style type="text/css">
<!--
address {
font-size: 0.8em;
font-style: normal;
line-height: 1.2;
}
//-->
</style>
</head>

<body>
<address>
〒612-8363<br>
京都市伏見区納屋町112<br>　　　　岩田納屋町ビル3F<br>
Email：<a href="mailto:nozomi-104@zpost.plala.or.jp">nozomi-104@zpost.plala.or.jp</a><br>
TEL：075-602-2341<br>
FAX：075-602-0534
</adress>

</body>

0.8emのフォントを指定しているのに、a要素内だけ反映されていません。
0273Name_Not_Found
垢版 |
2007/07/04(水) 09:47:21ID:???
>>272
WinXP Fx 2.0.0.4
font-sizeを0.5em、2emで試したが標準モード、互換モードともに再現せず。
0274Name_Not_Found
垢版 |
2007/07/04(水) 09:53:52ID:???
>>273
ありがとう。
ということは自分の環境の問題ですか。
0275Name_Not_Found
垢版 |
2007/07/04(水) 09:58:39ID:???
あっ、アホだ。。。

自分のスタイルシートを適応するアドオンを使ってた。。。
しかも質問スレに書くつもりがこのスレに書いていた。。。
0276Name_Not_Found
垢版 |
2007/07/04(水) 17:47:32ID:???
>>242
・全角フォント名をエスケープすれば有効になる
・全角フォント名をエスケープしても無効になる
意見が割れているので、マカーに調査して貰えないだろうか？
@charsetや、エスケープ単体か混在で変わるかもしれんし……
0277Name_Not_Found
垢版 |
2007/07/16(月) 01:21:10ID:Uk2IR3ON
マクは知らんのでWindows系で

<p style="font-size:12px;">じゅーにぴくせる</p>

これを画面設定のDPI設定で
96dpi（通常/小さなサイズ）にした場合と大きなサイズ（120dpi）にした場合
（それ以外のカスタム設定でもいいけど）で
IE→フォントの大きさが変わる
Fx→フォントの大きさが変わらない

DPIの概念からしたらIEの方が正しい動作のような気がするんだけど、
どっちにしてもどちらかがおかしい？
0279Name_Not_Found
垢版 |
2007/07/16(月) 03:00:12ID:???
>>277
どっちかといえばIEのほうが間違い。
300dpiのプリンタで印刷したとき極小文字になったりしたら困るだろ。
まあ96dpiと120dpiならIEの動作もぎりぎり許容範囲内かなと思わなくもないが。
0280Name_Not_Found
垢版 |
2007/07/16(月) 03:08:34ID:???
>>279
そりゃ解像度が違っててサイズが同じだった場合の話だろ。
0281Name_Not_Found
垢版 |
2007/07/16(月) 03:26:37ID:???
htmlで文字サイズ指定したらどうなんよ？
0282Name_Not_Found
垢版 |
2007/07/16(月) 04:53:48ID:???
htmlで解像度依存のフォントサイズ指定なんてできないだろう・・・
0283Name_Not_Found
垢版 |
2007/07/17(火) 02:21:29ID:???
>>277
ウェブ関連は96dpiが標準になってるって聞いたことがあるけど…。
0284Name_Not_Found
垢版 |
2007/07/17(火) 02:45:42ID:???
標準というか、まあ96dpiをひとつの基準とすることが推奨されてはいるけど。
ttp://www.w3.org/TR/2006/WD-CSS21-20061106/syndata.html#length-units
> It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.

だから240dpiの高精細ディスプレイとかあったら、当然1px≠1ドットにすべきなんだよね。
> If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.
でも120dpiが*very* differentかというとそこは実装依存のような気がする。
つまりIEもFxも間違いとはいえないんじゃないかと。
まあ極端なこと言っちゃえばrescaleすること自体shouldであってmustではないし。
0285Name_Not_Found
垢版 |
2007/07/17(火) 15:02:12ID:???
120pxじゃなくて、96dpi→100dpiぐらいの僅かな変更でもフォントサイズは変
わんないんだろうか。まあ、変わらなくてもバグとは言えないと思うが。
0287Name_Not_Found
垢版 |
2007/07/22(日) 09:44:25ID:???
Windowsでdpiの値を変更しても、画面解像度が変わるのではなくててフォント
サイズが変わるだけでしょ。画面の解像度(1024+768等)にフォントサイズあわ
せてやってもよいと思う。というか、Windowsのdpiの設定を有効にすると1px
の長さがfont-sizeプロパティとそれ以外で変わってしまうような。
0288Name_Not_Found
垢版 |
2007/07/24(火) 15:37:33ID:???
そもそも文字の大きさだけが変わるWindowsの設定自体が
なんか変だと思うんだが・・・
0289Name_Not_Found
垢版 |
2007/07/30(月) 16:15:35ID:???
【環境】Internet Explorer 7
【症状】text-align:centerでブロックレベル要素が中央寄せされる
【ソース】
div
{
text-align: center;
border: 2px solid red;
width: 300px;
}
div div
{
text-align: left;
border: 2px solid blue;
width: 200px;
}
<div>
<div>テスト テスト テスト テスト テスト テスト </div>
</div>

IE7の標準モードでも発生。まだ直ってなかったのか。
0290Name_Not_Found
垢版 |
2007/07/30(月) 16:23:45ID:???
>>289

それってIE7で修正されたんじゃなかったっけか？


と思ってやってみたら直ってないねｗ


IE7発表から1年も立ってないが、ゴミだよなあ
0291Name_Not_Found
垢版 |
2007/07/30(月) 22:06:49ID:???
【環境】Opera 9.20
【症状】li要素の最初の子要素にoverflow:autoが指定されているとマーカー
が表示されない
【ソース】
div { overflow: auto; }
<ol>
<li>test1</li>
<li><div>test2</div></li>
</ol>
<ul>
<li>test1</li>
<li><div>test2</div></li>
</ul>
0292Name_Not_Found
垢版 |
2007/07/31(火) 19:11:44ID:???
たぶんバグだと思うので一応
【環境】Internet Explorer 7
【症状】body要素の最初の子要素に上マージンが設定されているとbody要素の
上パディングが無視される
【ソース】
*
{
margin: 0;
padding: 0;
}
body
{
padding-top: 50px;
border: 2px solid blue;
width: 300px;
}
div
{
margin-top: 100px;
border: 2px solid red;
width: 200px;
}
<body>
<div>テスト テスト テスト テスト テスト テスト </div>
</body>
0293Name_Not_Found
垢版 |
2007/08/01(水) 21:05:28ID:???
>>292を訂正
【環境】Internet Explorer 7
【症状】幅が明示されていると親要素の上パディングと子要素の上マージンの
うち値の小さい方が無視される
【ソース】
*
{
margin: 0;
padding: 0;
}
div#boxA
{
padding-top: 70px;
background: lime;
width: 200px;
}
div#boxB
{
margin-top: 50px;
background: yellow;
width: 200px;
}
<div id="boxA">
<div id="boxB">test</div>
</div>

本来120pxの空白ができるはずなのに、70pxになってしまう。
0295Name_Not_Found
垢版 |
2007/08/04(土) 01:50:59ID:???
まー、増えたりはしないだろうけど
0296Name_Not_Found
垢版 |
2007/08/04(土) 02:05:51ID:???
1歩進んで2歩下がるんだな。。
0297Name_Not_Found
垢版 |
2007/08/05(日) 00:21:04ID:???
【環境】Internet Explorer 6
【症状】最初の子要素にdisplay:noneが指定されていると、相対位置決めされ上
パディングを持つ要素の背景色指定が無効になる
【ソース】
div#boxA
{
background: yellow;
position: relative;
padding-top: 1px;
}
div#boxB
{
display: none;
}

<div id="boxA">
<div id="boxB">boxB</div>
<div>test</div>
</div>

IE6の標準モード、後方互換モードで発生。
0298Name_Not_Found
垢版 |
2007/08/07(火) 17:02:54ID:???
ttp://d.hatena.ne.jp/Hamachiya2/20070804/browser_crasher

IEを華麗に撃墜する一行


はい！ こんにちは！！！！！
今日は、偶然ブラクラ発見しちゃったから、それをお伝えしますね！

これだよ！

<style>*{position:relative}</style><table><input></table>
0299Name_Not_Found
垢版 |
2007/08/07(火) 20:27:35ID:???
>>298
IE 7/6/5.5ユーザーは、ユーザースタイルシートを追加して回避する。
table * { position: static !important;}

バグ原因は、table と フォーム(input|textarea|...)要素間に現れる
謎の空要素に position:relative が指定される事で発動するらしい。
http://pc11.2ch.net/test/read.cgi/win/1175925637/559-561
0300Name_Not_Found
垢版 |
2007/08/08(水) 22:12:39ID:???
今回のはまちちゃんのクラッシュバグは、input(インラインフォーム要素) が
必須トリガーで無く、table + テキストでも同様のバグが発生する模様です。
ttp://sdp.katteyomi.info/?p=10

不正 table 記述により生成された"謎の空ブロック要素"が、インライン要素や
テキストを包み、その要素がポジショニング(relative | absolute | fixed)
される事で起きる様子..。
0301Name_Not_Found
垢版 |
2007/08/25(土) 12:23:58ID:X/4SavXL
【OS】　XP
【ブラウザ】　firefox 2.0.0.6
【症状】　overflow: auto; と border を指定した<pre>を連続して使用した場合に
borderのbottom部分が消える箇所がある。

スクショです。
ttp://vista.jeez.jp/img/vi8801214676.jpg
0302Name_Not_Found
垢版 |
2007/08/25(土) 19:17:54ID:???
>>301

消えるんじゃなくて
ボーダーが化けたりもするよね
0303Name_Not_Found
垢版 |
2007/09/05(水) 17:39:26ID:???
【環境】
Opera9.22 / Windows XP home
【現象】
labelタグに対するmargin-topとmargin-bottomが効かない。
【ソース】
<html>
<head>
<style type="text/css">
<!--
input{margin-top:3em;}
label{margin-top:3em;}
-->
</style>
</head>
<body>
<input type="checkbox" name="cat" id="cat" value="cat" />
<label for="cat">ねこ</label>

<input type="checkbox" name="dog" id="dog" value="dog" />
<label for="dog">いぬ</label>

<input type="checkbox" name="rabbit" id="rabbit" value="rabbit" />
<label for="rabbit">うさぎ</label>
</body>
</html>

IE6、FireFox2.0.0.4では、そもそもinputにmargin指定をするだけで、
それに対するlabel要素も一緒にmarginが入ります。
Operaでは、inputのみに指定したときも、inputとlabel双方に指定したときも、
どちらもlabel要素は動きませんでした。

どちらが正しい挙動なのか不明ですが…。
0304Name_Not_Found
垢版 |
2007/09/07(金) 16:03:16ID:LEnajBV0
>>303
Fxだってlabelに対するmargin-topは効かない。
labelはインライン要素で、インライン要素に対する上下marginは無視される。
つまりOperaの動作は正しい。
そもそもソースが間違っている。formがない上、
(strictなら)formの中身はブロック要素が必要。
IEは非検証。
0305Name_Not_Found
垢版 |
2007/09/19(水) 02:04:17ID:w91na6/+
【環境】
IE6(7は未検証)

【現象】
list-style-positio: inside のとき
list-sytle-type: none とすると、リストマーカーボックス分の余白が空く

【ソース】
<ul>
<li>リスト</li>
</ul>

ul { list-style: none inside; }



FirefoxやOperaだと余白は空かない = マーカーボックスは生成されない(?)
(display: none に近い挙動)

IEの場合はマーカーボックスは生成されてる(?)
(visibility: hidden に近い挙動)

既出？
0306Name_Not_Found
垢版 |
2007/09/19(水) 04:25:05ID:???
>>305
それは単にmargin-leftを指定しない場合の解釈の違いじゃね？
0307Name_Not_Found
垢版 |
2007/09/19(水) 08:35:26ID:???
>>306

いや、margin-left: 0 にしても
IEはリストマーカー分の余白が空く

すまん、書き忘れた
IE6の後方互換(Quirks)モードね

標準モードでもあとで試してみるわ
0308Name_Not_Found
垢版 |
2007/09/19(水) 10:22:07ID:???
>>305
後方互換モード、標準モードのIE6,7で再現できた。
0309Name_Not_Found
垢版 |
2007/09/19(水) 14:10:44ID:???
>>308

ありがとう
やっぱおかしいよね

でも、バグではなく解釈の違いってことなのかな
どっちにしてもIEだけ違うのでしばらく考えたよ


【解決策】
　IEでlist-style-type: none にするときは、list-style-position: outside にする。

ショートハンド使って、

　list-style: none outside;

でOKだね。
0310Name_Not_Found
垢版 |
2007/09/19(水) 14:37:11ID:???
というかそもそも表示しないんだからinsideにする必要性自体が存在しないというか。
0311Name_Not_Found
垢版 |
2007/09/19(水) 15:39:30ID:???
>>310

必要性が存在しない　の意味がわからないなあ
CSSなんだから、カスケーディングで継承されるでしょ

まさか要素ごとに全部プロパティ定義してるんなら理解できるけど…

継承前に list-style: disc inside とかあったら、
非表示のたびに list-style: none outside って書かないとだめ
0312Name_Not_Found
垢版 |
2007/09/20(木) 12:20:59ID:bclnFN38
環境：MAC Safari1〜2
症状：ピクセルで幅指定していないクリアボックス
の中のテーブルがセンタリングされない。

body,div,td{ text-align:center;}
div,table{ margin-left:auto; margin-right:auto;}

<div style="width:600px;">

<p style="width:300px; float:right;">フロート</p>
<p style="width:300px; float:left;">フロート</p>

<div style="width:100%; clear:both; background-color:#eee;">

<table width="300">
<tr><td>テーブル</td></tr>
</table>

</div>

</div>
0313Name_Not_Found
垢版 |
2007/09/20(木) 12:32:52ID:???
>>312
意味不明なんで最小単位でやりたいことを言ってくれ・・・
0314Name_Not_Found
垢版 |
2007/09/22(土) 01:03:27ID:???
IE6 で select の label をクリックすると一番上が選択されるのは既出だよね？
0316Name_Not_Found
垢版 |
2007/09/24(月) 01:00:42ID:dtO1xwtG
初書き込み_o_
IE6で確認。display:none または visibility: hidden な要素中に
append された form は、ENTER で submit できない。
可視状態で form を構築したあと display: none しておけば、
その後 display: block で表示しても ENTER が効く。

textfield 個数問題とは別のバグと考えます。
0317Name_Not_Found
垢版 |
2007/09/24(月) 01:23:53ID:dtO1xwtG
サンプル付けときます。IE で再現するはず。
<html>
<head>
<script type="text/javascript">
function toggle(id) {
var elem = document.getElementById(id);
//*
if (elem.style.visibility == 'hidden')
elem.style.visibility = 'visible';
else
elem.style.visibility = 'hidden';
/*/
if (elem.style.display == 'none')
elem.style.display = 'block';
else
elem.style.display = 'none';
//*/
}
var form = '<form onsubmit="alert(\u0027submit\u0027); return false;">'
+' <input type="text" name="text"/><br />'
+' <input type="text" name="text2"/><br />'
+' <input type="text" name="text3"/>'
+' <input type="image" src="blank.gif" style="position: absolute; top: 0; left: -50;" />'
+'</form>';
0318Name_Not_Found
垢版 |
2007/09/24(月) 01:25:11ID:???
続
function show3() {
var e = document.getElementById('testDiv3');
e.innerHTML = 'Form3(可視要素へのinnerHTML:Enter効く)' + form;
}
function show4() {
var e = document.getElementById('testDiv4');
if (e.style.display == 'block') return;
e.innerHTML = 'Form4(非可視要素へのinnerHTML:Enter効かない)' + form;
e.style.display = 'block';
}
</script>
</head>
0319Name_Not_Found
垢版 |
2007/09/24(月) 01:27:17ID:???
続
<body>
<button onclick="toggle('testDiv1')">フォーム1表示</button>
<button onclick="toggle('testDiv2')">フォーム2表示</button>
<button onclick="show3()">フォーム3表示</button>
<button onclick="show4()">フォーム4表示</button>
<div id="testDiv1">
Form1(初期状態可視:Enter効く)
<form onsubmit="alert('submit'); return false;">
<input type="text" name="text"/><br />
<input type="text" name="text2"/><br />
<input type="text" name="text3"/>
<input type="image" src="blank.gif" style="position: absolute; top: 0; left: -50;" />
</form>
</div>
<div id="testDiv2" style="visibility: hidden;">
Form2(初期状態非可視:Enter効かない)
<form onsubmit="alert('submit'); return false;">
<input type="text" name="text"/><br />
<input type="text" name="text2"/><br />
<input type="text" name="text3"/>
<input type="image" src="blank.gif" style="position: absolute; top: 0; left: -50;" />
</form>
</div>
<div id="testDiv3"></div>
<div id="testDiv4" style="display: none"></div>
</body>
</html>
0320Name_Not_Found
垢版 |
2007/09/24(月) 01:57:10ID:dtO1xwtG
すみません。考えてみれば上のは CSS/DHTML バグとは言いにくかったです_o_。

別の話ですが、厳密な再現条件突き止められてないんですが、IE で z-index: 10000 とかしてても以降に記述された要素の裏に回ってしまう問題で悩んでいるんですが情報ありませんでしょうか？
周りに iframe なし、relative は結構使ってます。
0321Name_Not_Found
垢版 |
2007/09/24(月) 04:26:22ID:???
お前どこまで図々しいわけ？
スレ汚しにも程がある。初心者質問スレ行けボケ。
0323Name_Not_Found
垢版 |
2007/09/29(土) 03:53:48ID:???
【環境】Opera 9.23
【症状】pre要素内で一つ目の改行が反映されない
【ソース】
.hoge pre:first-line
{
white-space: normal;
}

<pre>01...
02...
03...</pre>

そもそもセレクタがマッチするはずないのですが。
0324Name_Not_Found
垢版 |
2007/10/06(土) 02:00:02ID:???
【環境】Opera 9.23
【症状】html要素にheightプロパティ、body要素にmin-heightプロパティをパー
セント値で指定すると、ウィンドウをリサイズしたときにbody要素の高さが変
更されない
【ソース】
* { margin: 0; padding: 0; }
html {
height: 100%;
background: gray;
}
body {
min-height: 100%;
background: silver;
}

<body>
<div>
テスト テスト …
</div>
</body>
0325Name_Not_Found
垢版 |
2007/10/06(土) 02:33:33ID:???
補足：
* { margin: 0; padding: 0; }
html {
height: 100%;
border: 10px solid red;
}
body {
min-height: 100%;
border: 10px solid blue;
}

こんな風にボーダーをつけてみると、Opera 9.23ではbody要素の高さがおかし
くなる。
0326Name_Not_Found
垢版 |
2007/10/06(土) 04:30:48ID:???
すみません、>>325の訂正です。

【環境】Opera 9.23
【症状】heightプロパティが指定された要素の子要素にmin-heightプロパティ
をパーセント値で指定すると、高さが余分に高くなる
【ソース】
div#boxA {
border: 10px solid red;
height: 200px;
}
div#boxB {
border: 10px solid blue;
min-height: 100%;
}

<div id="boxA">
<div id="boxB">
テスト
</div>
</div>

boxAとboxBの上ボーダーの幅の合計分だけ高くなるみたいです。
0327Name_Not_Found
垢版 |
2007/10/06(土) 04:48:37ID:???
>>324
レンダリングの問題

>>326
当然の仕様

バグとは何か、少なくともこのスレでは仕様書と異なる挙動をバグと呼ぶ
何でもバグ扱いするのは間違い
0328Name_Not_Found
垢版 |
2007/10/06(土) 06:43:11ID:???
>>327
>レンダリングの問題
>>324については、普通ウィンドウをリサイズした場合、高さや幅などを再計
算して描画するはずなのに、それができていないってことだと思ったのです
が、なにか違うんでしょうか。

>>326
>当然の仕様
よくわからないので、できれば詳しい解説お願いします。(仕様ということは、
Opera9が正しくてFirefox2、Konqueror3、Safari3がバグ持ちってことになる？)
0329Name_Not_Found
垢版 |
2007/10/07(日) 16:39:15ID:???
あれ…誰もいない？

一晩おいて考えてみたけれど、>>327の主張は

・ウィンドウをリサイズしたときに仕様通りに表示できないのは仕様違反では
ない(=バグではない)←理由がわからない
・min-heightプロパティをパーセント値で指定したときは高さを余分に高くす
るという特別な規定が仕様で定められている←仕様書からは見つけられず

と、どちらも根拠がないように思った。
0330Name_Not_Found
垢版 |
2007/10/07(日) 18:57:34ID:???
【環境】Internet Explorer 7
【症状】絶対配置した要素の子要素に:hover疑似クラスを指定しても、その要
素の子要素の内容領域か上マージン領域にマウスポインタを合わせたときにし
かホバー状態にならない
【ソース】
div#boxA { position: absolute; }
div#boxB { border: 10px solid red; }
div#boxB:hover { border: 10px solid blue; }
div#boxC
{
margin: 10px; padding: 15px;
border: 10px solid yellow;
}

<div id="boxA">
<div id="boxB">
<div id="boxC">test</div>
</div>
</div>

標準モードのみで発生。
0331Name_Not_Found
垢版 |
2007/10/07(日) 21:09:05ID:???
>>329
親要素の高さがmin-heightで設定されると思ってるのか？
0332Name_Not_Found
垢版 |
2007/10/07(日) 21:16:28ID:???
>>329は仕様書もろくに読まずバグと決めつける愚か者。
会話は成立しないので注意。
0333Name_Not_Found
垢版 |
2007/10/08(月) 02:39:39ID:???
>>331
>>324と>>326のどちらに対する指摘なのかわからないのですが…。

補足しておくと、>>324のコードでは、html要素のボックスの高さが初期包含
ブロックである表示域の高さとなり、body要素のボックス高さもそれと同じに
なるはずなのですが、最初に表示したときはそうなっているものの、リサイズ
するとそうならないので、仕様違反であると思われます。リサイズしたあとに
リロードすると、同じサイズの表示域でもリロードする前とbody要素の高さが
変わっています。

>>326についてはCSSを次のものに置き換えてもらうとわかりやすいかと思います。
(例示がわかりにくくてすみませんでした。)

div#boxA { height: 200px; border: 10px solid red; }
div#boxB { min-height: 90%; border: 10px solid blue; }

boxBの包含ブロックの高さはboxAの内容領域の高さである200pxになるので、
boxBがboxAの内容領域にちょうど収まるはずです(10px + 200 * 0.9 + 10px = 200px)。
Firefox 2、Konqueror 3、Safari 3ではそのように表示されますが、Operaだ
けはboxBの内容領域の高さがちょっとだけ高くなります。

>>332
間違いがあるのなら、仕様書を根拠にどこが間違っているのか指摘してください。
0334Name_Not_Found
垢版 |
2007/10/09(火) 20:41:43ID:???
>>333
ここはバグ報告スレッドであって質問スレッドではない。出てけ。
0335Name_Not_Found
垢版 |
2007/10/09(火) 21:54:43ID:???
1. 包含ブロックにheightの値を<length>で指定
2. ブロックレベル非置換要素にmin-heightの値を100%で指定
3. ブロックレベル非置換要素の計算されたheightの値が
min-height(=包含ブロックのheight)より小さい

んだったらmin-heightをheightの指定値として使用するわけだから
borderで内容の高さが変わるなんていうのはバグだろ
0336Name_Not_Found
垢版 |
2007/10/10(水) 22:52:22ID:???
>>334
だから、>>324>>326でバグを示したら「それはバグではない」という趣旨のレ
スをもらったものの、理由が不明確だから、仕様書を根拠にした説明を求めて
るの。バグではないというのなら「仕様書にこう書かれており、Operaはその
通りに表示しているだけだ」と説明できるはずでしょう。
0337Name_Not_Found
垢版 |
2007/10/10(水) 23:38:15ID:???
>>336
もっともな話だと思うが
仕様書に載ってないなら、
各ブラウザ制作者の判断
ということもあり得ると思うよ。
0338Name_Not_Found
垢版 |
2007/10/10(水) 23:42:38ID:???
>>336
>>324がバグという主張は、再現しないため同意出来ない。
>>326は、包含ブロックのheightにborder分を含めて計算しているようだから、
バグなのだろう。
数値指定では起こらないし、width:100%;でも起こらない面白いバグ。
0339Name_Not_Found
垢版 |
2007/10/11(木) 03:06:00ID:???
>>337,338
どうもです。>>326についてはバグと言って問題なさそうなので、Wikiに書い
ておきました。

>>324は、うちの標準モードのOpera 9.23(Windows XP SP2/Ubuntu 7.04)とい
う環境では下の画像のように表示されます。
http://doiob.net/doiob/uploader/src/up11322.png
環境によっては再現しないのかもしれません。
0340Name_Not_Found
垢版 |
2007/10/13(土) 02:36:22ID:???
　　　　　　　　 ＿＿＿_　　　　　　　　　
　　　　　　　／　　 　 　＼　　　　　　　　
　　　　 　／　　─　 　 ─＼　　　　「作者の環境では再現しません」・・・か
　　　　／ 　　 （●） 　（●） ＼　　　　 　　　　　 　　　　
　　　　|　 　　 　 （__人__）　 　 |　＿＿＿＿＿＿＿_ 　　　
　 　　 ＼　　 　　 ｀ ⌒´ 　 ,／　| |　　　　　　　　　　| 　
　　　　ノ　　　　　　　　　　　＼　| |　　　　　　　　　　| 　
　 ／´ 　 　　　　　　　　　　　 　 | |　　　　　　　　　　| 　
　|　　　　ｌ 　 　 　 　 　 　　　　　| |　　　　　　　　　　|
　ヽ　　　 -一ー_~､⌒)^),-､　　　| |_＿＿＿＿＿＿__| 　　
　　ヽ ＿＿＿＿,ノγ⌒ヽ)ニニ-￣　　　| |　　| 　　　　　

　　　　　 　　　＿＿＿_
　　　　　　　／　　 　 　＼
　　　　 　／　＼　 　／　 ＼　　　これは便利な言葉ですね
　　　　／ 　（●） 　 （●）　 ＼ 　　
　　　　|　 　　 （__人__）　　 　 |　 ＿＿＿＿＿＿＿_
　 　　 ＼ 　　　｀ ⌒´　　　 ,／　| |　　　　　　　　　　|
　　　　ノ　　　　　　　　　　　＼　| |　　　　　　　　　　|
　 ／´ 　 　　　　　　　　　　　 　 | |　　　　　　　　　　|
　|　　　　ｌ 　 　 　 　 　 　　　　　| |　　　　　　　
0341Name_Not_Found
垢版 |
2007/10/20(土) 21:16:22ID:???
CSS・スタイルシート質問スレッドから報告するように誘導されました


<a href="〜" style="display:block;width:〜px;height:〜px;"><img src="〜" alt="〜"></a>
のように
A要素の中身がIMG要素で、A要素にdisplay:block;とwidthまたはheightを指定すると
WinIE5.0ではIMG要素上の左クリックが効かなくなります（outlineの線は出ます）
右クリックからリンクを開くを選べばリンク先に移動することができます
（A要素にpaddingやborderを指定するとpadding部分やborder部分だけが一応クリック可能になります）


バグらしいのですが既出ですか？
古いブラウザなのでもうとっくに既出だと思ったのですが
http://cssbug.at.infoseek.co.jp/
には載ってないようで
このスレを見て
http://mynotes.jp/cssbug/
にも行きましたが載っていないみたいで


詳細は
http://pc11.2ch.net/test/read.cgi/hp/1190261475/586-609
あたりです
0342Name_Not_Found
垢版 |
2007/10/21(日) 22:23:38ID:???
・・・IE5なんてもーどーでもいーよ・・・
0343Name_Not_Found
垢版 |
2007/10/24(水) 23:53:21ID:???
>>341
再現できた。古すぎて気がつく人がいなかったのかも。
0344Name_Not_Found
垢版 |
2007/10/26(金) 00:07:53ID:???
IE 7
背景色とマイナスマージン(とフロート?)の組み合わせで内容が消える。


<div style="margin-top: -1px; background: #FFFFFF">
<div sytle="float: left; widht: 100px;">
<p>内容</p>
</div>

<div sytle="float: right; widht: 100px;">
<p>内容</p>
</div>

<div sytle="clear: both;">
<p>内容</p>
</div>
</div>
0345Name_Not_Found
垢版 |
2007/10/26(金) 00:09:57ID:???
>>344

haslayout は 1 だし、内容もあるような高さにはなるんだけど
なぜかテキストだけが表示されない
フォームコントロールとかは表示される

IE 7、バグだらけだなあ・・・
0348Name_Not_Found
垢版 |
2007/10/28(日) 22:11:33ID:???
>>344
widthに直してためしてみたけど、標準・互換どちらでも再現しなかった。
Windows XP SP2 + Internet Explorer 7.0.5730.11
0351Name_Not_Found
垢版 |
2007/10/30(火) 10:10:21ID:???
float で複数段カラム作って、その下に clear:both したボックスを置くとする。

ＩＥだと、一番縦長のカラムの下からそのカラムに指定されているマージンだけ
下に配置したオブジェクトとマージンが空くけど、
ＦＦだと他の縦に短いカラムのマージンを適用するのかな？一番縦長のカラムと
下のオブジェクトがぴっちりくっついてしまうんだよね。

これはＩＥが勝手に解釈しているからそうなるのかな？
常考だとまずＦＦの解釈が正しいんだろうけど
0352Name_Not_Found
垢版 |
2007/10/30(火) 16:41:50ID:???
>>351
#boxA, #boxB { float: left; width: 100px; margin-bottom: 10px; }
#boxC { width: 100px; clear: left; background: aqua; }
#boxA { background: yellow; }
#boxB { background: lime; }

<div id="boxA">boxA boxA boxA boxA boxA boxA</div>
<div id="boxB">boxB boxB</div>
<div id="boxC">boxC</div>

を、Firefox、Operaで確認したが、普通に下マージンが取られるよ。てか、バ
グと確認できたんなら、そのソースを貼るようにしておくれ。質問ならスレ違
いなので質問スレで。
0353Name_Not_Found
垢版 |
2007/10/30(火) 18:44:27ID:???
<div id="container"> // width:100%

<div id="alpha"> // width:100% で margin-right: -300px; float: left;
<div id="alpha_reset"> // margin-right: 300px;
<p>ほげほげ</p>
</div>
</div>

<div id="blavo"> // width: 300px; float: left;
<p>ほげほげ</p>
<p>ほげほげ</p>
<p>ほげほげ</p>
<p>ほげほげ</p>
<p>ほげほげ</p>
</div>

<div id="charlie"> // width: 100%; clear: both;

</div>

こんな感じ。今は blavo が alpha より長い状態ね。

IE だと、blavo に margin-bottom: 1em; なんてしてやれば
blavo と charlie の間に 1em の空白ができるんだけど、
FF だと alpha と blavo の両方に margin-bottom: 1em; と
してやらんと隙間が空かないなぁ。というハナシですハイ。
0354Name_Not_Found
垢版 |
2007/10/30(火) 19:08:57ID:???
>>353
Fxもちゃんと空くが。
ソースもまともに書けないようだし、思い込みをバグバグ言うタイプだね。
0355Name_Not_Found
垢版 |
2007/10/31(水) 03:30:19ID:???
>>353
Firefox 2.0.0.8では#blavoだけにマージンを設定しても、ちゃんと空くよ。
0356Name_Not_Found
垢版 |
2007/10/31(水) 17:19:19ID:???
<!-- Start contents -->
<div id="contents">

<!-- Start main -->
<div id="main_index"><div id="main_index_reset">
<p>(ﾟдﾟ)ｼﾒｼﾞ</p>
</div></div>
<!-- End main -->

<!-- Start lists -->
<div id="lists_index"><div id="lists_index_reset">
<p>(ﾟдﾟ)ｼﾒｼﾞ</p>
<p>(ﾟдﾟ)ｼﾒｼﾞ</p>
</div></div>
<!-- End lists -->

<!-- Start links -->
<div id="links"><div id="links_reset">
<p>(ﾟдﾟ)ｼﾒｼﾞ</p>
<p>(ﾟдﾟ)ｼﾒｼﾞ</p>
<p>(ﾟдﾟ)ｼﾒｼﾞ</p>
</div></div>
<!-- End links -->

</div>
<!-- End contents -->

で、
0357Name_Not_Found
垢版 |
2007/10/31(水) 17:19:50ID:???
div#main_index {
width: 100%;
margin-right: -470px;
float: left;

background-color: #ccc;
}
div#main_index_reset {
margin: 5px 470px 5px 5px;
}

div#lists_index {
width: 470px;
margin-right: -220px;
float: left;

background-color: #999;
}
div#lists_index_reset {
margin: 5px 225px 5px 5px;
}

div#links {
width: 220px;
float: left;

background-color: #666;
}
div#links_reset {
margin: 5px;
}
0358Name_Not_Found
垢版 |
2007/10/31(水) 17:21:55ID:???
div#contents {
margin-bottom: 1em;

border: 1px solid #000;

background-color: #fff;
}

なソースだと、FFの2.0.0.8でlinksが次のオブジェクトにくっついちまいますな。
この３つを囲う contents でmargin-bottom 設定してるんだけど

情報小出しの最悪パターンで申し訳ない。
0359Name_Not_Found
垢版 |
2007/10/31(水) 17:26:27ID:???
ttp://sakuratan.ddo.jp/imgboard/img-box/img20071031171315.png

こんな具合。
0360Name_Not_Found
垢版 |
2007/10/31(水) 17:34:15ID:???
#contentsの中身がフロートするボックスしかないんだから
「次のオブジェクト」が#linksにくっつくのは仕様通り。
floatの概念を勉強し直せ。
0362Name_Not_Found
垢版 |
2007/11/05(月) 10:59:10ID:???
IE 7

code, samp, pre要素にfont-sizeが継承されない


CSS:
body {
font-size: 200%;
}


HTML:
<body>
<p>200%</p>
<pre>200%</pre>
<div><code>200%</code></div>
<div><samp>200%</samp></div>
</body>



このバグ、まだのこってるのかよ・・・
0363Name_Not_Found
垢版 |
2007/11/07(水) 23:08:13ID:???
【環境】Opera 9.24
【症状】ブロックレベル要素の:hover疑似クラスにoutlineプロパティを指定
すると、ホバー状態でなくなったときにアウトラインの線が残る
【ソース】
div:hover { outline: solid red }
div { display: block }

<div>AAAAAAAAAA</div>
<div>BBBBBBBBBB</div>
<div>CCCCCCCCCC</div>
<div>DDDDDDDDDD</div>
<div>EEEEEEEEEE</div>

Opera 9.5では直っている模様。
0364Name_Not_Found
垢版 |
2007/11/10(土) 17:46:54ID:???
>>362
Internet Explorer 7.0.573011 + Windows XP SP2で確認してみたけれど、標
準・互換モードともに発生せず。
0365Name_Not_Found
垢版 |
2007/11/12(月) 17:42:38ID:???
【環境】Opera 9.24, 9.50 beta
【症状】table要素にborder属性を指定し、table:before, table:after,
tr:before, tr:afterにcontent:""を指定すると、セルの数が増える
【ソース】
table:before, table:after, tr:before, tr:after
{
content: "";
}

<table border="5">
<tr>
<td>A1</td><td>B1</td>
</tr>
<tr>
<td>A2</td><td>B2</td>
</tr>
</table>
0366Name_Not_Found
垢版 |
2007/11/12(月) 17:57:28ID:???
なんか必死にoperaのバグ探ししてるけどさ、
フィードバックした方がいいんでね？
0367Name_Not_Found
垢版 |
2007/11/12(月) 20:21:40ID:???
探しているわけではなくて、Operaを使い出したらバグをいろいろ見つけてし
まったというだけのこと。一応こっちにも書き込みながら、フィードバックも
するようにします。

>>365みたいなのも送っていいんだよね。
0368Name_Not_Found
垢版 |
2007/11/14(水) 18:58:40ID:???
見つけてしまったので一応報告。

【環境】Opera 9.24, 9.50 beta
【症状】ブロックレベル要素の:first-line疑似クラスにwhite-space:normal
を指定すると、:before疑似要素のcontentプロパティの値が表示されない
【ソース】
.foo div:first-line { white-space: normal }
div { display: block }
div:before { content: "text:" }

<div>div</div>

CSSの1行目を削除すると表示されます。
>>323のバグと関係しているかもしれません。
0369Name_Not_Found
垢版 |
2007/11/28(水) 02:57:30ID:???
IE7のバグ二つ。
検証ファイル：http://doiob.net/doiob/uploader/src/up13102.zip

【環境】Internet Explorer 7
【症状】子要素でbackground-image:noneを指定すると親要素で指定した背景
画像が表示されない
【ソース】
div#boxA { background-image: url("bg.png") }
div#boxB { background-image: none }

<div id="boxA">
<div id="boxB">
<p>テスト</p>
</div>
</div>

【環境】Internet Explorer 7
【症状】子要素でbackground-image:noneを指定し、親要素にpadding-bottom
を設定すると、親要素で指定した背景画像が全面に表示される
【ソース】
div#boxA { background-image: url("bg.png"); padding-bottom: 1px }
div#boxB { background-image: none }

HTMLは上に同じです。
http://cssbug.at.infoseek.co.jp/detail/winie/b061.html と関係しているかも。
0370Name_Not_Found
垢版 |
2007/11/30(金) 12:58:11ID:???
【環境】Opera 9.24, Opera 9.5 beta
【症状】フロートに後続する要素でフロートをクリアすると、その要素の
上マージンが無効になる
【ソース】
#boxA { background: yellow; }
#boxB {
float: left;
background: aqua;
}
#boxC {
clear: left;
margin-top: 100px;
background: lime;
}

<div id="boxA">boxA</div>
<div id="boxB">boxB</div>
<div id="boxC">boxC</div>
0371Name_Not_Found
垢版 |
2007/11/30(金) 13:46:57ID:???
【環境】Opera 9.24, Opera 9.5 beta
【症状】間にフロートを挟んだ上マージンどうしが相殺するとき、フロートが
包含ブロックより上に配置される

#boxA { background: yellow; }
#boxB { background: orange; padding-right: 20px; }
#boxC {
float: left;
background: aqua;
}
#boxD {
margin-top: 100px;
background: lime;
}


<div id="boxA">boxA</div>
<div id="boxB">
<div id="boxC">boxC</div>
<div id="boxD">boxD</div>
</div>
0372Name_Not_Found
垢版 |
2007/12/09(日) 19:53:46ID:???
【環境】Opera 9.24, Opera 9.5
【症状】vertical-align:text-bottomを指定した要素のボックスが
親要素の内容領域の下にはみ出す
span.p {
background: lime
}
span.text-bottom {
vertical-align: text-bottom;
font-size: 15px;
background: yellow
}
<span class="p">parent
<span class="text-bottom">text-bottom</span>
</span>

0373Name_Not_Found
垢版 |
2007/12/13(木) 14:05:51ID:???
【環境】Internet Explorer 7
【症状】全称セレクタがコメントにマッチする
div *:first-child { color: blue }
div + * { color: blue }

<div>foo
<!-- comment -->
<div>bar</div>
</div>
<!-- comment -->
<div>baz</div>
0374Name_Not_Found
垢版 |
2007/12/15(土) 01:07:11ID:???
これはバグでしょうか
【環境】Internet Explorer 6
【症状】input要素内に「あ」「亜」「Ａ」等、いわゆる全角文字を書くと、
その瞬間にinput要素の横方向サイズが変わる。

<head>
<title>テスト</title>
<style type="text/css">
div { border-left : blue 100px solid; }
input { width : 30%;}
</style>
</head>
<div><input type="text" /></div>

互換モードでも標準モードでも発生します。
0375Name_Not_Found
垢版 |
2007/12/20(木) 23:47:57ID:???
【環境】Internet Explorer 6, 7
【症状】list-style-position:insideを指定すると、マーカーボックスと
li要素の主要ブロックボックスが重なる

ol { list-style-position: inside; }
<ol>
<li>test</li>
<li>test</li>
<li>test</li>
...
<li>test</li>
</ol>

ol要素(list-style-type:decimalなど)で、マーカーの桁数が増えても
マーカーボックスが大きくならないようです。
標準モード、後方互換モードどちらでも発生します。


0376Name_Not_Found
垢版 |
2007/12/22(土) 06:04:05ID:???
【環境】Opera 9.24, Opera 9.5 beta
【症状】overflow:scrollとを指定した要素にボーダーやパディングを設定する
と、子ボックスの右側に指定された量の空白ができる

div.scroll {
overflow: scroll;
border: 10px solid gray;
}
div.scroll > div {
border: 4px solid silver;
}

<div class="scroll">
<div>
テスト テスト テスト...
</div>
</div>
0377Name_Not_Found
垢版 |
2007/12/23(日) 23:49:05ID:???
*{ margin : 0 ; padding : 0 ; }

<h1>test</h1>
<h2>test</h2>

これをIE6で見るとh1とh2要素の間に謎の空白が生まれてるんですけど
どうすれば解消されるでしょうか
FFではともに0で計算されて表示されてたのですが・・・。
0378Name_Not_Found
垢版 |
2007/12/23(日) 23:49:59ID:???
すみません誤爆りましたほんとすみません
0379Name_Not_Found
垢版 |
2007/12/27(木) 18:53:57ID:???
既出または何処かのバグ症状と重なってる可能性が高いと思うけど・・気になったので一応。

【環境】IE7
【症状】CSSバグリスト＠CSSバグ辞典スレッド（http://cssbug.at.infoseek.co.jp/） の
h1要素が左に伸びてしまっているが、バナーにマウスカーソルを持っていくと縮む（正しい長さになる）。
しかし、他のリンクにマウスカーソルを持っていくと元に戻る（伸びる）。
0380Name_Not_Found
垢版 |
2007/12/27(木) 21:10:23ID:???
上と同じ者ですが・・

【環境】IE7
【症状？】2-362（http://cssbug.at.infoseek.co.jp/detail/winie/b058.html）の
症状は、Shift_JIS，EUC-JPでは再現されるが、UTF-8にすると再現出来ない（正しく表示される）。

文字コードによるCSSの差異って起こるものなんですね・・。
0382Name_Not_Found
垢版 |
2007/12/27(木) 23:43:46ID:???
>>381
ソースプログラムの文字コードを変更するとってことです・・。
0383Name_Not_Found
垢版 |
2007/12/29(土) 01:41:59ID:???
>>379はこんなソースで再現できた。

a:hover {
background: white;
}
#bar {
margin: 1em -3%;
background: yellow;
text-align: center;
}

<body>
<div><a href="foo">foo</a></div>
<div id="bar">bar</div>
<div><a href="baz">baz</a></div>
</body>

・fooにマウスポインタを合わせるとbarが短くなる
・barが短いときはfooとbazの文字列の右側がクリックできる
・bazの右側にマウスポインタを合わせると最初の長さに戻る
・標準モードのIE7のみで発生する
0385Name_Not_Found
垢版 |
2008/03/12(水) 15:47:17ID:???
Operaって最前面の要素しかhoverしない？

<dl><dt><a href="...">Link</a></dt><dd>リンク</dd></dl>
に対して
dd{ display:none; }
dt:hover + dd{ display:block; }
a{ display:block; }
としても、dd要素が見えるようにならない。

IE7/FireFox2では見えるようになったのだが。
Operaのバージョンは9.26
OSはWindowsVista
0386385
垢版 |
2008/03/12(水) 16:20:16ID:???
>>385修正
×　としても、dd要素が見えるようにならない。
○　としても、dt要素(=a要素)にマウスカーソルを載せてもdd要素が見えるようにならない。
0388Name_Not_Found
垢版 |
2008/03/13(木) 19:33:09ID:???
>>387
まじか・・・。じゃああとでzipでソース上げるから検証してほしい。
そのまえでこっちでミスがないかよく見直して見るけど。
0389385
垢版 |
2008/03/14(金) 10:13:59ID:???
使用中のCSS+テスト用HTMLファイル
ttp://www11.axfc.net/uploader/20/so/He_80910.zip.html
pass: 404
0390Name_Not_Found
垢版 |
2008/03/14(金) 10:47:33ID:???
>>385に
a:active{color: red;}
を加えると再現できた。
0391385
垢版 |
2008/03/14(金) 11:19:32ID:???
擬似クラスを指定した複数の要素を重ねると発生するのか。
0392Name_Not_Found
垢版 |
2008/03/22(土) 03:38:46ID:???
Win版Safari(ver3.1)で、CSS内に@charsetを指定した場合、
直後のスタイルプロパティが無効になるってのは、既出ですか?

例:
@charset "Shift_JIS";

* {
margin: 0;
padding: 0;
}

↑の例だと、* {}内のプロパティが無視されちゃいます...
既出だったらすみません...
0393Name_Not_Found
垢版 |
2008/03/24(月) 12:27:56ID:???
再現しないよ。WinXP SP2+Safari 3.1で確認。
0394Name_Not_Found
垢版 |
2008/03/24(月) 21:16:32ID:???
>>393
今確認したんですが、どうも以下の条件で発生するようです。

1. @importで外部CSSファイルを読み込む
2. 1.で読み込んだCSSファイルに@charsetが指定されていれば、直後のプロパティを無視

Shift_JISとUTF-8では確認しました。
0395Name_Not_Found
垢版 |
2008/03/25(火) 01:40:13ID:???
>>394
試してみたけど再現しなかった。検証したファイルを上げてもらうと
助かります。
0396394
垢版 |
2008/03/25(火) 08:40:07ID:???
>>395
@charsetを絶対指定しなければいけないわけでもなく、ホントに些細な問題ですが、
ご協力感謝いたします。

ttp://www37.tok2.com/home/kilukulu/bug-check.html

上記URLで確認可能です。
バグが発生しない限り、背景色が青(#0080ff)になります。
バグが発生した場合は、背景色はデフォルトのはずです。
ちょっと見づらいでしょうが、宜しくお願いし居ます。

[検証環境]
OS: Windows XP Home Edition SP2
Browser: Safari 3.1
0397Name_Not_Found
垢版 |
2008/03/25(火) 11:12:58ID:???
@charsetをファイル先頭に書かないと、次にある宣言や@規則が無視される
みたいだね。@importで読み込まなくても発生した。

@charsetはファイル先頭に書かないといけないので、正しくCSSを書いて
いれば特に問題はないんだけれど、仕様通りの動作ではないね。
0398Name_Not_Found
垢版 |
2008/03/25(火) 12:07:28ID:???
VistaのBusinessのSafari 3.1でも再現
0399394
垢版 |
2008/03/25(火) 13:18:23ID:???
>>397
そうでした、@charsetは先頭でしたね。お恥ずかしい・・・orz
IE7やFirefox2ではきちんと表示されていたので、疑問に思ってたんですが、
まさか、自分の間違いだったとは・・・

ご協力、ありがとうございました!
0400Name_Not_Found
垢版 |
2008/04/13(日) 19:25:48ID:tBpxFebe
・DHTML、IE5
別エレメントに既存エレメントをappendChildした後で、既存エレメントの子エレメントをdocument.getElementByIdで参照し、innerHTMLを設定するとエラーが発生するっぽい。

ソース？
別エレメント.appendChild(既存のエレメント);
document.getElementById(既存のエレメントの子エレメントのID).innerHTML=""
・結果
「未知の実行時エラーです」
0403Name_Not_Found
垢版 |
2008/04/18(金) 22:36:59ID:???
まとめwiki亡くなってるやん
0404Name_Not_Found
垢版 |
2008/04/20(日) 16:35:54ID:???
最初のまとめサイト管理人が失踪してるから、結局何も出来ず更新もされず、という現状
いつまでも検索も更新も出来ない超不便まとめを使うハメになってる
0405Name_Not_Found
垢版 |
2008/05/16(金) 06:06:15ID:???
すみません。しばらくウェブから離れていあたら、まとめサイトが
エロサイトにorz 失効したドメインを取得されてしまったみたいです。

データは残っているので引き継いでいただける方がいましたら
差し上げたいと思います。迷惑をかけてしまい本当に申し訳ありません。
0406Name_Not_Found
垢版 |
2008/06/08(日) 21:42:30ID:???
既出かどうか知らないが報告

<h2><a id="honya" name="honya">ほにゃらら</a></h2>

<p><a href="#honya">タイトルに飛ぶ</a></p>

でh2にdisplay:none;

IE6　　　→　消しているのに、なぜかh2の位置へ飛ぶことができる
Fox2.0　→　消しているので、当然飛べない
0407Name_Not_Found
垢版 |
2008/06/08(日) 22:19:10ID:???
IEは「なぜか」ってあるけど
どっちが正しいと言うわけではないのでは？

「display（表示）」に関する指定だから
レイアウトには影響するけどhtml文書側のid属性まで無効にさせるかどうかはまた別な気が
0408Name_Not_Found
垢版 |
2008/06/08(日) 23:48:02ID:???
display:noneのときは何も生成されないんだから
参照不可能なんじゃね？
0409Name_Not_Found
垢版 |
2008/06/09(月) 00:41:45ID:???
生成されないのはレイアウトボックスだろ？
0410Name_Not_Found
垢版 |
2008/06/09(月) 00:43:25ID:???
そういやOperaはdisplay:none;を指定した要素または要素内にimg要素やscript要素があった場合
IEやFirefoxと違ってロードすらしないらしいけど
デフォルトスタイルがdisplay:none;なhead要素内にobject要素があった場合はこれもロードしないのだろうか
head要素内にobject要素を置くことは可能だけど
0411Name_Not_Found
垢版 |
2008/06/13(金) 13:48:22ID:???
Opera 9.50は読みに行かないみたいだね。
0412Name_Not_Found
垢版 |
2008/06/16(月) 10:50:23ID:KE/tsnbA
IE6、7でリストの文字サイズが小さいとへんなマージン出来ちゃうんだけど
liにfloat:leftかけると消える　firefoxではマージンはできない
既出？

<ul>
<li style="background-color:#0000FF;height:10px;font-size:1px;list-style-type:none;"></li>
<li style="background-color:#0000DD;height:10px;font-size:2px;list-style-type:none;"></li>
<li style="background-color:#0000CC;height:10px;font-size:3px;list-style-type:none;"></li>
<li style="background-color:#0000BB;height:10px;font-size:4px;list-style-type:none;"></li>
<li style="background-color:#0000AA;height:10px;font-size:5px;list-style-type:none;"></li>
<li style="background-color:#000099;height:10px;font-size:6px;list-style-type:none;"></li>
<li style="background-color:#000088;height:10px;font-size:7px;list-style-type:none;"></li>
<li style="background-color:#000077;height:10px;font-size:8px;list-style-type:none;"></li>
<li style="background-color:#000066;height:10px;font-size:9px;list-style-type:none;"></li>
<li style="background-color:#000055;height:10px;font-size:10px;list-style-type:none;"></li>
<li style="background-color:#000044;height:10px;font-size:11px;list-style-type:none;"></li>
<li style="background-color:#000033;height:10px;font-size:12px;list-style-type:none;"></li>
<li style="background-color:#000022;height:10px;font-size:13px;list-style-type:none;"></li>
<li style="background-color:#000011;height:10px;font-size:14px;list-style-type:none;"></li>
<li style="background-color:#000000;height:10px;font-size:15px;list-style-type:none;"></li>
<li style="background-color:#001100;height:10px;font-size:16px;list-style-type:none;"></li>
<li style="background-color:#002200;height:10px;font-size:17px;list-style-type:none;"></li>
</ul>
0414Name_Not_Found
垢版 |
2008/06/18(水) 10:06:41ID:fBjG2qeg
>>413
line-height:1pxにしたら詰まった！
font-sizeだけじゃだめなのね
0415Name_Not_Found
垢版 |
2008/06/21(土) 16:21:40ID:8lzEhjx7
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>test1</title>
</head>
<body bgcolor="#ff0000">
<br>
<br>

<br>
<img src="./test.jpg" style="filter: alpha(opacity=100);" />

</body>
</html>

サンプル
http://h-t-t-p.hp.infoseek.co.jp/test.html

filter:opacityを設定すると画像によって部分的に透過率が0になってしまう。
ここでは御大の顔の右側の赤いドット。
http://h-t-t-p.hp.infoseek.co.jp/test.jpg
画像そのものは普通。に見える。
ならない画像もあるので現状再現が難しいがFireworksから縮小かけて書き出すと結構な確率でなる。
数十ドットが欠けることもある。
IE6,IE7のみで。filterが独自拡張だから当然だけど。
これ今結構こまってて、誰か解決法知ってたら教えてください。
質問スレみたいに使って怒られるかもしれんけど質問スレ機能してないから許して
0417Name_Not_Found
垢版 |
2008/06/21(土) 17:51:59ID:???
imagemagickでの生成時に-gamma 1.5/1.5/1.5をかけることで
なんとか回避できたっぽい
不本意だけどとりあえずこれで急場をしのぎます
誰かスマートな解決法知ってたら教えてください
0418Name_Not_Found
垢版 |
2008/08/12(火) 19:42:24ID:erOejHqY
【OS】WindowsXP Home Edition
【ブラウザ】Firefox3.0.1（恐らく3.0以降で同じ症状）
【症状】input要素のtype属性値がfile/checkbox/radioの場合に限り
　　　　CSSで設定した背景色が反映されずシステム（Windows）設定色になる

StrictでもTransitionalでも試しましたが、同様のようです。
配色設定は「Webページが指定した配色を優先する」になっています。
Fx自体の背景基本色とは別の色に設定してありますが、
適用されているのはWindowsのウィンドウシステム設定色のようです。
特に問題なのがtype="file"の場合で、なまじ文字色はCSSどおり反映されているので、
白地に白字というようになると見えなくなります。
その他のinput要素については背景色が設定されます。
checkbox/radioについては3未満のバージョンでも同様だったと思われますが、
fileについては確実に2と3で動作が異なっています。
0419Name_Not_Found
垢版 |
2008/10/23(木) 17:33:11ID:82vzWFus
スレッド要約を拝見したのですが、ieのバグリストで
[4-313]フロートに隣接する要素は親要素との間で上下マージンが相殺されない
ですが、ie6.0の互換モードでは正しく動作しませんか？
(とはいえ上端に1pxの空白は開きますが)
0420Name_Not_Found
垢版 |
2008/11/02(日) 01:02:06ID:???
もしかしてまとめサイト死んだ？
403なるんだが。
0421Name_Not_Found
垢版 |
2008/11/11(火) 21:15:46ID:???
あちゃー
そろそろ亡くなるかもしれないから浚っておかないとと思ってたら・・・
俺のバカ
0422Name_Not_Found
垢版 |
2008/11/12(水) 00:05:22ID:???
ドメイン失効させちゃって今は別の人に取得されている状態なんです,
ごめんなさい. 過去のデータは残っているのでほしい方がいましたら
どこかにアップロードできます.
0423Name_Not_Found
垢版 |
2008/11/12(水) 12:57:13ID:???
ありゃま
欲しいな
うちでホスティングしてもいいなら適当なドメインとってupするよ
容量どのくらい？
0424Name_Not_Found
垢版 |
2008/11/12(水) 14:10:24ID:???
あのデータベースは本当に助かってた
きたいあげ
0425Name_Not_Found
垢版 |
2008/11/12(水) 16:14:02ID:???
うぎゃー！
まとめがまさかまさかの403！！！！！
だれかうｐおながいしまつ。。
0426Name_Not_Found
垢版 |
2008/11/13(木) 00:37:57ID:???
>>423 氏とは別人ですが、
infoseek のまとめサイトが 403 になってしまったのと
他の Wiki 等も機能されていないようだったので
既にドメインを取得して新しいまとめサイトを準備中の者です。
先にこちらでご報告すべきでしたよね・・・ごめんなさい。

infoseek まとめサイトの管理者様にはメールを送りましたが
エラーで戻ってきてしまいました。

>>422
是非データほしいです！よろしくお願いします。
0427Name_Not_Found
垢版 |
2008/11/13(木) 00:51:16ID:???
ドメイン取らんくていいよ
そしてスペースは放置してても消されないフリーサーバでいいよ
と思ってしまう
0428Name_Not_Found
垢版 |
2008/11/13(木) 02:45:03ID:oUQGtqWL
フリーサーバーなんかでやったら余計長続きしないと思うのは俺だけ？
残るには残るが更新されないんじゃあ・・・
0430Name_Not_Found
垢版 |
2008/11/13(木) 18:10:51ID:kGx2d91t
サーバースペースがガッチリ確保できてたらいいし
ドメインが「バグ辞典スレッドって分かる」みたいなのとってくれてるなら
それにこしたことないんじゃまいか。

やる気ある人にまかせてみよ
0431Name_Not_Found
垢版 |
2008/11/13(木) 18:23:24ID:???
基本文字情報＋数色程度のインデックスカラーな画像
だろうから容量はいらないよね
Wiki借りてまとめWikiという形が無難かな
0432Name_Not_Found
垢版 |
2008/11/13(木) 18:53:59ID:???
放置じゃなくてちゃんと
メンテナンスしてくれる人がやってほしい。
ついでにいうと、もっと見やすくしてくれ。。
0433Name_Not_Found
垢版 |
2008/11/13(木) 19:27:48ID:???
バックアップしてなかったオバカな俺みたいなのを助ける、急場凌ぎの為にも、
過去データ取っているなら適当なアプロダに上げてくれると嬉しいな……。

まとめサイトは存続して、メンテナンスされるのであれば、形式はどんなものでも良いと思う。
個人的にはDokuWikiとか好きだけど、
単にWikiというだけだと板人口的にも廃墟になることが有り得そうでちょっと怖い。
ドメインとかを取ってまで運用しよう、と考えるくらいにやる気のある人がいるなら、
個人的には超歓迎。応援してます。
0434422
垢版 |
2008/11/13(木) 19:56:31ID:???
遅くなって済みません. アップロードしました.
http://www.csync.net/service/file/view.cgi?id=1226573274

infoseekのほうはInternet Archiveからzipのアーカイブが落とせるみたいです.
(気づかずにすごく無駄な作業をしてしまった…)
0435426
垢版 |
2008/11/13(木) 21:00:24ID:???
>>434
ダウンロードさせていただきました。ありがとうございます！

というわけで、一通りのデータ入力が終わって公開の目処がたちましたら
URL をお知らせにきます。
0436Name_Not_Found
垢版 |
2008/11/13(木) 21:07:28ID:???
>>434
アップロードありがとう。感謝。

>>435
応援してます。頑張って！
0440Name_Not_Found
垢版 |
2008/12/24(水) 09:34:23ID:???
HTML 5とCSS3が使われだしたらまたバグ辞典が活躍するかも．
しかし，昔みたいにバッドノウハウな回避法でなんとか動かすなんて
ことにならないでほしい．
0441Name_Not_Found
垢版 |
2008/12/28(日) 10:44:57ID:qgnOL99g
期待 age.
0442Name_Not_Found
垢版 |
2008/12/31(水) 00:37:46ID:???
何でIE6とOperaでうまくいくのにFireFoxだとダメなんだよ。
頭きたからページ丸ごと画像にしてやった。
そしたらCSSでシコシコやってたら何日かかるかっていうようなページがすぐ完成。
画像だから角丸なんてアッという間。イメージマップでリンクもちゃんと張れるし
どんなブラウザでも絶対崩れない。
SEO？音声ブラウザ？そんなもん知るか。
どーせ遊びのサイトだからこれで十分だよ。

お前らも画像でやれ。
0445Name_Not_Found
垢版 |
2009/01/03(土) 17:33:42ID:???
　　　　　　　　/| /l
　ｼｬｷﾝ　　 ｜|//ミ
　　ｼｬｷｰﾝ! ｜|/
　　　　　　／Ｏヽ
　　　　 ((/∧ﾍ))
　　　　 /⌒)/つ′
　 　 　/ /~｜｜
　　 　/ /　｜｜　>>442のレスを見てると、子供のころに戻ったようで。安心する。
　　　/ /_　/ /　　自分が馬鹿だからなのか、馬鹿になりたいからなのか、
　　 f /^o^)/　　　常識とか捨てて適当に生きていきたいと強く思う。
　　 |　　　/
　　 |　 ／⌒)
　 　| ／/　/
　　 丶_｜ /
　　 ｜ ｜｜
　　 ﾉ　(_ 丶
　 ／ ノ　し′
　/ ／
（ ｉ
　丶つ
0446Name_Not_Found
垢版 |
2009/01/03(土) 22:25:13ID:???
Flashレイアウトが存在するんだから画像レイアウトもアリだな。
重要なテキスト部分だけcssで被せればいい。
0449Name_Not_Found
垢版 |
2009/01/06(火) 02:06:01ID:???
>>442
OperaとIEでうまくいってFxでうまくいかないってどんなデザインだよｗ
もうちょっと釣りの勉強してこい

>>448
!importantｗ
0450Name_Not_Found
垢版 |
2009/01/22(木) 12:24:57ID:???
【OS】Windows Vista Home Premium / Bussiness
【ブラウザ】IE 7
【症状】兄要素に文字列やbrタグが入ってるときに、
font-style: italic;を指定した要素にmargin-topを指定すると、
親要素の背景色が上から150pxのところで消える。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
</head>
<body style="margin: 0px;">
<div style="background-color:#fcc;">
<div>CSS Rendering Test</div>
<div style="margin-top:200px;font-style:italic;">CSS Rendering Test</div>
</div>
</body>
</html>

表示させた後、ウインドウサイズを変更したり最小化最大化を行う必要があります。
0451Name_Not_Found
垢版 |
2009/01/22(木) 12:47:45ID:???
【OS】Windows Vista Home Premium / Bussiness
【ブラウザ】IE 7
【症状】親要素がインライン要素のとき子要素にdisplay: list-item;を指定すると、
親要素の背景色が浮き出る。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
</head>
<body style="margin: 0px;">
<span style="background-color:#fcc; display:inline;">
<span style="background-color:#ccf; display:list-item;">CSS Rendering Test</span>
</span>
</body>
</html>

inlineの子要素にlist-itemが来ちゃってるので、
正当なバグといえるか分からないですが。
0452Name_Not_Found
垢版 |
2009/01/22(木) 13:20:25ID:???
【OS】Windows Vista Home Premium / Bussiness
【ブラウザ】IE 8 beta 2（IETester）
【症状】親ブロック要素に背景色が指定してあるとき、
子インライン要素にoutlineを指定すると、何も現れない。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE8" />
<title>CSS Rendering Test No.04887</title>
</head>
<body style="margin: 0px;">
<div style="background-color:#fcc;">
<span style="outline: 10px solid #000;">CSS Rendering Test</span>
</div>
</body>
</html>

親ブロック要素にmarginを指定すると回避できます。
このバグは、marginがデフォルト設定してないdiv要素やaddress要素だと発生し、
p要素やblockquote要素だと発生しません。
0453momo
垢版 |
2009/03/04(水) 11:55:41ID:???
【OS】Mac OS 10.5.6 【ブラウザ】Safari 3.2.1 【症状】10列のテーブル。一番左端のTDにだけ、border-top: 1pxを指定。 それ以外のTDにはborderをつけたくないのに、全て反映されてしまう。 ちなみに、ほかのブラウザでは問題無しです。
どなたか、詳しい方が居たら、教えて下さい(＞＜;)ぉねがいします
0454Name_Not_Found
垢版 |
2009/03/04(水) 12:14:45ID:???
>>452
IE8 RC1 (build 18372) WinXP SP3 では Fix されてるよ
0455Name_Not_Found
垢版 |
2009/03/04(水) 12:23:12ID:IeLHLW2u
〉〉453
そうそう、それわたしも前にはまった(ノ△Ｔ) 教えてジョブズ！
0456Name_Not_Found
垢版 |
2009/03/04(水) 13:53:42ID:???
>>453
実証コードキボン

手元でてきとーに作ってみたけど、これで意図どおり？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>table > tbody > tr > td:first-child のみ border-top:1px 指定</title>
</head>
<body>
<table border="1" summary="td テスト">
<tbody>
<tr>
<td style="border-top:1px solid #f00">1</td>
<td>2</td><td>3</td><td>4</td><td>5</td>
<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
0457453 momo
垢版 |
2009/03/04(水) 20:44:10ID:???
>>456さん
早々にありがとぅござぃます！！ホントですね、このソースなら上手く行きますね。
参考にして勉強します！ありがとうございました☆
0458Name_Not_Found
垢版 |
2009/03/04(水) 21:57:35ID:???
>>457
どんな XHTML 文書だったのかがすげー気になる・・・
0459457 さくら
垢版 |
2009/03/04(水) 23:38:21ID:IeLHLW2u
>>456
なるほど〜 一つ目のtdにborder-topを設定すると良かったんですね!
参考になりました。私も今度も試してみます!o(^-^)o
0460455 さくら
垢版 |
2009/03/04(水) 23:43:09ID:???
457さん、すみません間違えました。 私は455でした…(>_<)
0461momo
垢版 |
2009/03/05(木) 02:02:39ID:???
>>460
きにしないでくださぃ☆
0462Name_Not_Found
垢版 |
2009/03/05(木) 14:04:43ID:???
確かにどうやって失敗したのか書いてほしいな
0463Name_Not_Found
垢版 |
2009/03/06(金) 01:02:26ID:???
>>462
同意
ここはバグ辞典スレなんだから、情報があるに越したことはない
0464450-452
垢版 |
2009/03/06(金) 02:25:56ID:???
>>454
IE8 RC1 (build 18372)，WinVista Home Premium / Bussinessにて、こちらでも確認しました。
0465Name_Not_Found
垢版 |
2009/03/14(土) 11:42:41ID:o8JxV32E
バグか？！
ttp://hp.vector.co.jp/authors/VA022006/css/fonts.html#font-weight
の
補足：フォントサイズはユーザにまかせよう　って見出し付いてる本文２行目
「指定すべきではありません。特定の環境では文字サイズの変更を面倒にさせるかもしれません。文書著者はユーザ設定の基本フォントサイズに対して相対」
の35文字目の　「る」が動く。
この一行　左からポインタでくくって　文字反転していくと、
左から29文字目の　「を」を　くくった瞬間に　「る」が左に1px動くのは
仕様ですか？

ちなみに動作確認ブラウザ Firefox
発見時間　2009/03/14　am11:39
0467Name_Not_Found
垢版 |
2009/04/18(土) 12:22:36ID:y+hIu1SM
バグじゃなくて正常な動作かも分からんですが。

OS：WinXP　SP3
ブラウザ：IE8
現象：overflow:autoでスクロールバーが表示されない。
状況：HTML4.01Strict、IE8標準表示モード
大雑把なソース：

<div style="overflow:auto;width:800px;height:18px;">
　　<div style="width:1200px;height:1px;"> </div>
</div>

IE8互換表示モード、Firefox3、Opera9.6、Safari3、Google Chrome1.0では
水平スクロールバーが表示されるものの、IE8標準表示モードのみ表示されず。

対処：親側のdivをoverflow:autoからoverflow-x:scrollに変更したところ、IE8標準表示モードでも表示された。

業務系のwebアプリで、横スクロールするテーブルの上にもスクロールバーを付けてくれと
言われたもんで、上に空っぽのスクロールバーを作ってonscrollで連動させようとしたら発生しますた。
0468Name_Not_Found
垢版 |
2009/04/19(日) 17:57:08ID:???
IE8ってまだベータだろうが
0469Name_Not_Found
垢版 |
2009/04/19(日) 18:31:06ID:???
楽天もヤフーも使えないIE8、役にたたなすぎる
0470Name_Not_Found
垢版 |
2009/04/19(日) 21:30:06ID:???
IE8 正式版が出てからもう一ヶ月近くになりますね。
皆様いかがおすごしでしょうか。
0471Name_Not_Found
垢版 |
2009/04/19(日) 23:29:17ID:???
正式版になってたのか・・・
0472Name_Not_Found
垢版 |
2009/04/20(月) 19:03:25ID:???
うちの会社のシステム担当がIE7自動更新をブロックしてたのが
つい最近だから、IE8なんて遠い未来の話だと思ってた。
0473Name_Not_Found
垢版 |
2009/04/30(木) 17:43:51ID:???
で、結局CSSバグ辞典はどうなったん？
0474Name_Not_Found
垢版 |
2009/04/30(木) 18:09:08ID:???
てか>>435の人はアップしたんだろうか？
もしアレだったら>>434のアップロードしようか？
0475473=474
垢版 |
2009/04/30(木) 19:01:27ID:???
http://cssbug.xii.jp/
とりあえずやってみた。誰かと被ってたorまずかったらスマソ。そのときは消します。
需要あればいいんだが…。
0478Name_Not_Found
垢版 |
2009/05/01(金) 12:23:02ID:???
>>435です。
かなり遅くなってしまいましたが公開しました。
http://css-bug.jp/

>>475氏と思いっきり被ってしまって涙目ですごめんなさい。
0479Name_Not_Found
垢版 |
2009/05/01(金) 12:46:08ID:???
>>478
おつです！
本家（？）が来たようなのでサイトたたみますかｗ
これからは>>478さんにおまかせします〜。
0480Name_Not_Found
垢版 |
2009/05/01(金) 12:52:55ID:???
ふと思ったけどIE5.xのバグってどうやって再現させるんだ？
ほとんどIE6以降だろうし。
0482Name_Not_Found
垢版 |
2009/05/04(月) 00:24:40ID:???
ttp://www.google.com/support/forum/p/apps?hl=ja
Googleページのリンク２個だけがリンク切れしてるかと思って
ソース見たらカーソルをcursor: text; にしている。
<a href="" style="color: rgb(0, 0, 204); cursor: text; ">利用ガイド</a>
これは、何かのバグ対策なの？　何の意味があるの？
0483Name_Not_Found
垢版 |
2009/05/04(月) 02:10:09ID:???
>>478
自分も作ってたけど、どう見てもこっちの方が出来がいいな
>>475も合わせておつ
0484Name_Not_Found
垢版 |
2009/05/04(月) 12:27:47ID:???
>>478
乙です
が、IEとの比較にNetscape7.1標準モードってのはさすがにもうそろそろやめませんか…ｗｗｗ
0485Name_Not_Found
垢版 |
2009/05/04(月) 22:54:34ID:???
しかも、MTだから管理者しか編集できないな
スレッド第４版のレス314以降も対応して欲しいです
0486Name_Not_Found
垢版 |
2009/05/05(火) 13:01:29ID:???
wikiの方がいいな・・・
更新頑張ってくれるならいいんだけどさ
0487478
垢版 |
2009/05/05(火) 13:23:10ID:???
>>484
以前有志の方が制作されたバグ辞典スレッドまとめサイトの内容をそのまま移植したので古い内容のままになっています。

>>485
ぼちぼちがんばります

>>486
wikiマスターが身近におらずMTになってしまいました。
おすすめのwikiなどありますでしょうか。
0488Name_Not_Found
垢版 |
2009/05/20(水) 00:40:42ID:fYqozEmw
ガイシュツ？

OS：WinXP SP3
ブラウザ：Firefox3.0.5
現象：overflow-y:scrollを指定したエリアの高さが34px以下にならない。
簡単なソース：
（HTML4.01Strict）
<table style="width:200px;">
　<tr>
　　<th>ほげ</th><th>ほげ</th><th>ほげ</th>
　</tr>
<table>
<div style="width:217px;overflow-x:auto;overflow-y:scroll;">
　<table style="width:200px;">
　　<tr>
　　　<td>ぴよ</td><td>ぴよ</td><td>ぴよ</td>
　　</tr>
　<table>
</div>
<table style="width:200px;">
　<tr>
　　<th>ほげ</th><th>ほげ</th><th>ほげ</th>
　</tr>
<table>

いわゆるヘッダとフッタが固定されたスクロールテーブルを作ろうとしたところ、
IE8、Opera9.6、GoogleChromeなどではスクロールバーの上下に付いている三角ボタンが
縮小表示されて3つのテーブルが密着するのに、Firefoxだけ高さ17pxのいつもの三角ボタンが
レンダリングされるため、真ん中のスクロールエリアが縮んでくれずに隙間ができる。
0489Name_Not_Found
垢版 |
2009/05/20(水) 00:44:35ID:???
あ、申し訳ない。真ん中のdivにheight:auto;max-height:100px;を指定してる状態で。
0490Name_Not_Found
垢版 |
2009/05/20(水) 00:45:17ID:???
最小単位のソースで出しましょう
0491Name_Not_Found
垢版 |
2009/05/21(木) 23:10:36ID:???
ああすまん。
普通に<div style="height:auto;max-height:100px;width:217px;overflow-x:auto;overflow-y:scroll;"></div>だけでも良いわな。
0493Name_Not_Found
垢版 |
2009/05/22(金) 18:52:23ID:z1i3aaj8
【環境】WinVista IE8
【現象】和文OpenTypeフォントを指定すると、印刷時に行の折り返しなどで乱れが起きる。
下記のソースで実験した。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<style type="text/css"> BODY {font-family:"小塚明朝 Pr6N R";} </style>
<body>
<p>あいうえおかきくけこ、「アイウエオ」一二三四五六七八九〇。あいうえおかきくけこ、「アイウエオ」一二三四五六七八九〇。……※以下十回繰り返し</p>
</body></html>
これを印刷プレビューで見ると、カギ括弧とアが重なってるし、右端が不揃になるし、また
　……あいうえおかきくけこ
　きくけこ、「アイウエオ」……
と、折り返した後でテキストに無い重複を勝手にしたりする。
FireFox3だと問題無し。

実験したＯＴＦの小塚明朝は、Adobe Readerを入れると
C:\Program Files\Adobe\Reader 9.0\Resource\CIDFont
にある。
他に"ヒラギノ明朝 ProN W3","ヒラギノ明朝 Pro W3","FOT-筑紫明朝 Pro LB"で試したが結果は同じ。
なぜか市販でないフリー・フォントの"みかちゃん"ではこの不具合は起きなかった。
また不思議なことに、DOCTYPE宣言をTransitionalでなく
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
とすると、この印刷時の不具合は生じなくなる。下記でもよし。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

cf.OpenTypeフォントを用いて2バイト文字を表示することができない
http://css-bug.jp/win/ie/ver6/0324/
http://page.freett.com/onlineuser/OTTest/OTTest.html
0494Name_Not_Found
垢版 |
2009/05/22(金) 18:57:08ID:???
>>493追記
問題が起きるのは印刷時（印刷プレビュー）だけで、ブラウザ表示だけだと支障無し。
0495Name_Not_Found
垢版 |
2009/05/22(金) 23:22:44ID:???
ぶっちゃけフォントの問題までカバーする必要は・・・・
0496Name_Not_Found
垢版 |
2009/05/23(土) 00:25:34ID:???
フォントの所為ではない。FireFoxならＯＫってことは、WinIEの問題でしょ。
0497Name_Not_Found
垢版 |
2009/05/23(土) 00:34:25ID:???
>>492
うーむ、でも高さを指定するとmax-heightを指定した意味が……。
0498Name_Not_Found
垢版 |
2009/05/23(土) 05:10:06ID:???
「自分がそうしたくない」ことをバグにしたがる奴が増えてんな・・・
0499Name_Not_Found
垢版 |
2009/05/23(土) 05:28:11ID:???
>>493はWin2000・IE6でも再現した。試したＯＴＦは「ヒラギノ明朝 Pro W3」。
0501Name_Not_Found
垢版 |
2009/05/25(月) 23:39:07ID:???
仕様ねえ。互換モードでなければ正常印刷ってのがワケわからんな。
0502Name_Not_Found
垢版 |
2009/05/27(水) 00:37:38ID:???
>>487
DokuWiki

別にMTでもいいんだけど、更新速度やらまとめリストやら考えると、Wikiの方が利便性良くないかな。
二重運営でも大して手間かからないかもしれないし。
Wikiでも管理者以外更新しなけりゃ意味ないんだけどね。
0503Name_Not_Found
垢版 |
2009/05/27(水) 04:14:47ID:???
ここ最近の流れを見ていると
バグでないものでも更新しそうな人が多そうでｇｋｂｒ
0504Name_Not_Found
垢版 |
2009/05/31(日) 00:28:07ID:???
ファイアフォックスなんていう重たいだけの糞ブラウザを使ってる奴が悪い。
0505Name_Not_Found
垢版 |
2009/06/10(水) 10:53:29ID:???
新まとめサイトだけどさ
一番上のIE8、IE7クリックしたときに
「現在、IE*のバグに関するデータが登録されていません」
みたいなコメントつけておいて欲しい

必然的に「バグ一覧」クリックしてしまうけど
あれはIE全てのバグ一覧なんでしょ？

とりあえず、それだけ要望です
0506Name_Not_Found
垢版 |
2009/06/10(水) 11:00:35ID:???
ついでに、IE8のCSS に関する記事

IE8で修正されたCSSとHTMLおよびXHTML関連のバグ - builder by ZDNet Japan
ttp://builder.japan.zdnet.com/sp/internet-explorer-8-2009/story/0,3800095257,20392076,00.htm
0507Name_Not_Found
垢版 |
2009/06/11(木) 03:43:42ID:???
>>505
css-bug.jpの者です、ご指摘ありがとうございます
バグが登録されていないのか不具合なのか紛らわしいですね
後ほどコメントを追加しておきます

バグ一覧はIEに限らず登録されているすべてのバグ一覧となっています

Wikiにしてみんなで編集できるようにしてほしいというご意見をいただき
DokuWikiとMediaWikiをダウンロードしたところで時が止まっています

スレ4レス315以降に報告されたバグをまとめる作業も進んでおりません
手際の悪い管理人で申し訳ないです
0508Name_Not_Found
垢版 |
2009/06/22(月) 19:00:57ID:???
IE8 と Firefox3 で起きている拡大縮小に関するバグ
ttp://blog.webcreativepark.net/2009/03/30-125731.html

IE8 でa要素内に画像があり、背景を指定した時に位置がずれる
ttp://css-happylife.com/log/bug/000743.shtml
0509Name_Not_Found
垢版 |
2009/06/22(月) 19:03:40ID:???
連投スマソ

>>507
管理人さん、何か手伝えることはないですか？
バグの情報を事前に html で書き起こして、まとめるくらいなら
できます。
0510zQYnIYjLd
垢版 |
2009/06/24(水) 02:51:06ID:???
into the cigar likethe blood are open.<a href=www.youtube.com/orderviagraonline1>order viagra online</a>the penis; in thisarteries going topenis fast. The
[url=www.youtube.com/orderviagraonline1]order viagra here[/url]then gets trapped instiffens. That means
0511Name_Not_Found
垢版 |
2009/06/24(水) 03:28:49ID:???
>>509
・個人サイト張り付けるな
・バグの前にwikiを調べてこい
0512Name_Not_Found
垢版 |
2009/06/30(火) 23:18:54ID:???
IE8で3つぐらいの入れ子にしたリストで
リストマークがおかしくなるのですが
報告はこちらでもよろしいのでしょうか？
0513Name_Not_Found
垢版 |
2009/07/01(水) 00:32:00ID:???
IETesterのバグみたいです
すみませんでした
0514Name_Not_Found
垢版 |
2009/07/06(月) 12:43:24ID:???
MS純正IE8でもう一度確認したけど
やはりリストマークがおかしくなる
とりあえず比較画像

ttp://nagamochi.info/src/up21087.gif

発生条件が確定してないけど
IE8だけおかしくて、IE7以下は問題ない
0515Name_Not_Found
垢版 |
2009/07/06(月) 13:31:06ID:???
おかしいっていうかマーカーの描画ってそこまで厳密に決められた仕様じゃないから
8のデカいスクウェアでも「そうなんです」と言われたら「そうなんですか」と納得するしかないような
0519Name_Not_Found
垢版 |
2009/08/14(金) 13:01:45ID:sSYDhfE7
んー、つまりIE8でlist-style-type : square;にするとマーカーが大きく表示されるのは仕様なのかな？
よくわからないけど、フォントの指定によって改善される？
ユニコードキャラクタが云々って書いてるけど、よくわかんないや。

気になったのでageで。
0520Name_Not_Found
垢版 |
2009/08/14(金) 20:53:22ID:???
>>519
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=332529
にはおおむね次のようなことが書いてあるみたい：

・CSS 仕様ではビュレットに「この Unicode 文字使うように」と書いてある（註1）
・IE8 は U+25A0（■） → U+25AA → U+25FC → U+25FE の順に見つかったものを使う
・Courier フォントには Unicode 文字が含まれてない
・フォールバックして U+25A0 があるフォントを使う（？）

つまるところ：
・マーカーの表示は li 要素が継承した font-family のフォントに依存
・前述した Unicode フォントがあるかどうかで大きさが決まる
ってことらしい

註1：
CSS List Module Level 3 のことらしい
http://dev.w3.org/csswg/css3-lists/#square
0521Name_Not_Found
垢版 |
2009/08/16(日) 22:38:23ID:???
なるほど。
Verdanaが好きでいつも使ってるけど、それだと■がでかくなっちゃうんだよな。
ただCSSの仕様上これが正しいって言われると我慢するしかないか・・・
0522Name_Not_Found
垢版 |
2009/08/31(月) 16:16:44ID:???
>>39 と同じと思われる現象が Windows Safari 4.0.3 で出ました。
回避方法は見付かっていないのでしょうか？
0523competition
垢版 |
2009/09/04(金) 19:50:29ID:0eS9ANId
デザイナーのみなさん、現在CSS Creatorでは、サイトLogoの competitionを行っています。
興味のある方はRead the Briefからどうぞ。

http://99designs.com/contests/27869
0524Name_Not_Found
垢版 |
2009/09/05(土) 19:29:16ID:???
relative要素がある場合、bodyにもrelativeを設定しないと
IE系でズームアップ・ダウンした際に正常動作しない
0525Name_Not_Found
垢版 |
2009/09/05(土) 23:47:01ID:???
>>524
それってウィンドウリサイズ時にrelative要素の配置がおかしくなる問題と一緒？
0526UwxNeMFxGMMdSsLCd
垢版 |
2009/10/23(金) 22:42:24ID:???
Base on that and your blog posts, I hope to catch him on tour. ,
0527Name_Not_Found
垢版 |
2010/02/05(金) 00:02:30ID:???
【Google Chrome 4.0】
ruby要素が親ブロック要素へのインデント指定を反映する
ttp://www.google.com/support/forum/p/chrome/thread?tid=1cf875b455ef1bc7&hl=ja
ruby要素・rb要素はインライン要素、
だから親ブロック要素に適用されるtext-indentプロパティーは継承しない筈だが、
ルビ附き文字の前にインデント指定した分だけ空白ができる。

例
p {text-indent:1em;}
<p>対応ブラウザでは<RUBY><RB>ルビ</RB><RP>（</RP><RT>ふりがな</RT><RP>）</RP></RUBY>が表示される。</p>
「対応ブラウザでは  ルビが表示される。」とルビ附き文字の前が無意味に一字空きになる。
0528Name_Not_Found
垢版 |
2010/02/05(金) 00:13:44ID:???
【Google Chrome 4.0】
インライン・テーブルにしたruby要素内のrb要素・rt要素を
displayプロパティーで表と同様に表示させようとすると、文字列が消えて見えなくなる。

http://www.akatsukinishisu.net/itazuragaki/css/use_ruby_style_as_user_stylesheet.html
http://fswiki.org/wiki.pl?page=BugTrack-theme%2F23
上記にある通り、
rb要素（ルビベース）にはdisplay:table-row-group;を、
rt要素（ルビテキスト）にはdisplay:table-header-group;をスタイル指定してある場合。
Chrome 4では、rb要素もrt要素もなぜかdisplay:none;状態になって不可視になる。
これを回避するには、
ruby { display: inline; }
rt { display: block; }
rb { display: block; }
をChrome4に適用させればルビ表示は元に戻るみたい。
但しその場合Safariでルビ表示にならなくなるが。
0529Name_Not_Found
垢版 |
2010/03/17(水) 11:50:06ID:a//ADYW9
Opera10.5x

vertical-align text-bottomが、他のブラウザと違って位置がずれる。

Opera10.1x
画像より小さい、line-heightに設定して、その画像にvertical-align　bottomを設定すると、正常に表示されない。（他のブラウザと挙動が違う。）
0530Name_Not_Found
垢版 |
2010/03/25(木) 18:03:48ID:???
Opera10.51
Opara10のみ適用させるための属性セレクタ・ハックが利用できなくなった。
下記はOpera10.50までOperaのみ有効だったが、ver.10.51ではOperaでもスタイル指定は無効になる。
html[lang*=""] body:last-child p {color:red;}
cf. http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack03/03.html#13
代用として、Opera9.51ハックと呼ばれるものはまだ有効。
p:not(\*|*) {color: red;}
cf. http://d.hatena.ne.jp/momizine/20090108/1231397816
0531Name_Not_Found
垢版 |
2010/04/07(水) 21:06:39ID:+rQZcCMQ
そういえば、CSSバグ辞典のwikiは、誰か引き継いんだんですか？
0532Name_Not_Found
垢版 |
2010/04/26(月) 18:50:10ID:???
【OS】Windows7 Home Prenium 64bit版
【ブラウザ】Firefox3.6.3
【ソース】
＜CSS＞
body {
background:url(p001.png) #ff0;}
select#s1 {
background:url(002.png);}
＜HTML＞
<form action="#">
<fieldset>
<select id="s1">
<option>1</option>
<option>2</option>
</select>
<select id="s2">
<option>1</option>
<option>2</option>
</select>
</fieldset>
</form>
【症状】
selectに背景画像を設定しない場合、システム背景色が適応される。
しかしselectのみに背景画像を指定しoptionは無指定すると、
selectを開いたときのoptionの背景が何故かルート要素の背景色
（上記例の場合、001.pngですらなく#f00）になる。

また、select#1に背景画像と共にbackground:url(002.png) #f00;のような背景色の指定をした場合、
selectを開く前からselectの背景が何故かselectの背景色（この場合#f00）になる。
（後者のこの症状についてはOpera10.51でも同様だったので、もしかして仕様？）
0533Name_Not_Found
垢版 |
2010/04/27(火) 21:48:21ID:???
IE8の標準準拠モード
a要素の中にimg要素があると、
a要素に付けたactive疑似クラスの挙動がおかしい。

<a><img src="hoge.jpg"></a>

a{
display:block;
padding:5px;
}
a:active{
background:red;
}

a要素をクリックした場合は、マウスボタンを押さえている間
active疑似クラスの設定が反映されて背景色が赤くなるはずだが
img要素の上でクリックした場合は、無反応。a要素のpadding領域で
クリックした場合は、正常に背景色が赤く変わる。
ただしリンクとしての動作はいずれの箇所をクリックしても正常。
また、レンダリングモードがIE7なら指示通りの挙動になる。
0534Name_Not_Found
垢版 |
2010/04/27(火) 22:04:58ID:???

＞５１９
Ie9以外はbulletを文字でなくて絵でかいてるよ
0535Name_Not_Found
垢版 |
2010/09/20(月) 11:36:47ID:???
Opera10.62
inline-block、border、min-widthを同時に指定すると幅の計算がおかしくなる。

Firefox、Chrome、Safari、IEでは改行されないけど、Opera10.62だと改行される。
Opera9.52では改行されなかった。

<style>
ul, li {
display: inline-block;
}
ul {
background-color: red;
}
li {
border: 1px solid #000000;
min-width: 4em;
}
</style>
<ul>
<li>ああああ</li>
<li>いいい</li>
<li>ううううう</li>
</ul>
0536Name_Not_Found
垢版 |
2011/01/24(月) 01:35:34ID:???
Opera11
従来のOpera用ＣＳＳハックが効かなくなった。
0537Name_Not_Found
垢版 |
2012/04/19(木) 17:14:30.59ID:???
IE 6, 7で、a要素の中に別な要素があってそいつがfloatしてると、cursorがpointerじゃなくtextになる

<a href=".">
<span style="float: left;">
ここのカーソルが……
</span>
</a>
0538Name_Not_Found
垢版 |
2012/09/15(土) 18:13:20.70ID:???
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
0539Name_Not_Found
垢版 |
2012/11/07(水) 16:57:05.80ID:???
久々に見に来たら
3年前の俺のレスからほとんど進んでないとは・・・
需要なくなった感じだな
0540Name_Not_Found
垢版 |
2012/12/04(火) 13:23:48.19ID:???
css-bug.jp 活動終了ですか。
だとしたら残念ですが、事情あっての事でしょう。
お世話になりました、ありがとうございました。
0542Name_Not_Found
垢版 |
2012/12/13(木) 23:27:20.83ID:mmAfCJBg
flashの上にz-indexを使って画像を重ねたのですが
アンドロイドだけ正しく表示されず、flashが上にきてしまいます。
下記記述をしましたが解決されません。

<param name="wmode" value="transparent" />
<embed src="main.swf" wmode="transparent" />

なにか良い解決方法はないでしょうか。
0544Name_Not_Found
垢版 |
2013/10/20(日) 18:24:37.67ID:???
IE10で確認。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE10">
.tategaki {
writing-mode:vertical-rl;
writing-mode:tb-rl; /*For under IE8*/
-ms-writing-mode:tb-rl;/*IE9互換だと無効*/
height:25%;
width:100%;
}
<div class="tategaki" id="COL1">
<p>ここに一段目の縦書きのテキストが入ります。</p>
</div>
<div class="tategaki" id="COL2">
<p>ここは二段目になります。</p>
</div>

width:100%;を入れないと、縦書き表示なのに画面左に行が寄って、段の右から始まらない。
しかしwidthを指定すると、heightの%指定が画面表示領域横幅に対する割合になるバグが生じた。
0545Name_Not_Found
垢版 |
2013/10/23(水) 23:53:07.57ID:???
directionプロパティを指定した要素に背景色を指定すると文字テキストが消える。
IE10strict/Quirksで確認。
span {
background:#ccc;
color:#000;
direction:rtl;
unicode-bidi:bidi-override;
}
<p>なぜか<span>この文字テキスト</span>が消える。</p>
<p><span>これだとカーソルでドラッグ選択もできなくなる。</span></p>
0546Name_Not_Found
垢版 |
2013/10/24(木) 04:11:12.85ID:???
だいたいdirectionプロパティって、日本語組版だと利用する場面が無くない？
http://blog.imagedrive.jp/2011/01
古くから扁額とかに見られた右横書きだって、あれは一字一行の縦書きなのであって、複数行にわたることないし。
0547Name_Not_Found
垢版 |
2013/10/25(金) 07:14:36.32ID:???
Internet Explorer 5.5 における縦書きレイアウトの使用
http://msdn.microsoft.com/ja-jp/library/bb250415(v=vs.85).aspx
BODY要素は常に水平方向にレイアウトされ、ブラウザは常にマークアップ内の
最上位要素の原点をビューポートの開始点として整列します。
上記の例では、この原点がページの左上隅になります。読み込んだページに
テキストが表示されるようにするには、ページ本体を右にスクロールする必要があります。
これを回避するには、BODY 要素の direction プロパティを RTL (右から左) に設定し、
グローバルな DIV 要素の direction プロパティを LTR (左から右) に戻します。
この結果、原点は右上隅になります。
0548Name_Not_Found
垢版 |
2013/10/26(土) 01:26:28.34ID:???
取り消し線（del要素等）の色が一定しない【Safari5〜／Google Chrome 30（Webkit系）】
a:link, a:hover, a:visited {color:blue;}
del {
text-decoration:line-through;
color:gray;
}
<p><del>取り消し<a href="link.htm">リンク</a>抹消<del>通常テキスト</p>

上記の例をWinIE10・Firefox24・Opera12で見ると、
A要素部分にリンク文字色（青色）の上から灰色の取り消し線が引かれる。
しかし、Safari5.1.7やGoogle Chrome 30やOpera17等のWebkit系のみ挙動が異なる。
A要素の部分は文字色と同色で取り消し線が引かれる。

かつて似た例に、親要素のtext-decorationの効果を子孫要素で取り消せない事例があった。
これは取り消せる方がバグであった。
http://pentan.info/stylesheet/bug/winie040.html
http://www.mozilla.gr.jp/standards/webtips0002.html
すると解釈としては、Webkit系だけが正しく解釈してるのか？
0549Name_Not_Found
垢版 |
2013/10/27(日) 02:41:55.84ID:???
word-breakがブロックレベル要素以外で効かない
http://pentan.info/stylesheet/bug/winie128.html

word-break:break-all;をインライン要素に指定しても、
半角英数字から成る長い単語（URLとかソースコードも）は次行に送られ、右端で改行してくれないことがある。
横幅によっては文字列中のハイフン「-」の位置で改行すればいいのに、してくれなかったりとか。
.break {word-break:break-all;}
p {width:38em;}
<p>文章中に出てくるURLとか、長く連続した英数字（→<span class="break">LongLongLongVeryLongWordByRomanAlphabet</span>）にだけスタイルを適用させたいのだけど……。</p>

親ブロックに指定せずともきっちり折り返して行の右端が揃ったのは、下記だけだった。
Google Chrome 30.0.1599.101 m
Safari5.1.7

IE10は「→」の右で改行、Firefox24・Opara12は「英数字」の右で改行した。
0550Name_Not_Found
垢版 |
2013/10/30(水) 03:23:53.30ID:???
Windows版Safari5.1.7で確認。
Webkit独自実装の縦書きプロパティーの-webkit-writing-mode:vertical-rl;
これの適用時、DOCTYPEスイッチがQuirksモードだと、
width:100%;みたいな％指定の横幅が短くなって表示が乱れる。
中でどんな計算しとるのかは解らんかった。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
body {
direction:rtl; unicode-bidi:bidi-override;
margin:0;
}
.tategaki {
direction:ltr; unicode-bidi:bidi-override;
writing-mode:vertical-rl;
writing-mode:tb-rl; /*For under IE8*/
-webkit-writing-mode:vertical-rl;
overflow-x:auto;
height:50%;
width:95%;
}
<div class="tategaki" id="COL1">
<p>ここに一段目の縦書きのテキストが入ります。長文</p>
<p>以下繰り返しで横スクロールが生じるだけの長文にする。</p>
</div>
<div class="tategaki" id="COL2">
<p>ここは二段目になります。</p>
</div>

逆に、標準モードでもwidthが％指定だと問題が起きる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";>
多段組で縦書きボックスが複数ある場合、中身が長文でも各縦書き領域に横スクロールバーが出ない。表示領域全体に対してしか横スクロールできない。
overflow-x:auto;でなくoverflow-x:scroll;と指定してすら、
バーは表示されてもスクロールのつまみが出てこないから動かせないって理不尽な状態になる。
0551Name_Not_Found
垢版 |
2013/10/31(木) 17:27:10.18ID:???
Google Chrome30

折り返しを抑制した文字列を含むテーブルが横方向にはみ出すことがある。
例）
nowrapを指定してないA要素以外の文字列で折り返す筈だが……？
navbar1 a:link, .navbar1 a:visited {white-space:nowrap;}
.navbar1, .navbar1 table {width:80%;}
<div class="navbar1">
<table width="100%" border="1"><tr>
<td>
<a href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>／<a
href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>／<a
href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>／<a
href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>／<a
href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>
</td>
</tr></table>
</div>

但し、HTMLソースでの改行の仕方を変更すると、nowrapを指定してない文字列でちゃんと折り返す。
<td>
<a href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>／
<a href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>／
<a href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>／
<a href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>／
<a href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>
</td>

cf. 「テーブルがはみ出しても横スクロールバーが表示されない」
http://pentan.info/stylesheet/bug/mozilla051.html
0552551
垢版 |
2013/10/31(木) 17:58:13.75ID:???
類似現象はむしろこっちか。
「表セル内要素への折り返し禁止指定がセル自体に作用する」
http://pentan.info/stylesheet/bug/opera008.html

あと、折り返し禁止してない文字列「／」を２文字にすると、
ちゃんと折り返して、テーブルが横に伸びる現象を回避できる。
0553551
垢版 |
2013/10/31(木) 18:22:17.29ID:???
これも該当か。
「インライン要素への折り返し禁止指定が当該要素の外のブロックに作用する」
http://pentan.info/stylesheet/bug/mozilla029.html
＞折り返しが行われるべき場所に空白類文字を挿入するとこのバグを回避できます。

何年も前のNetsacape7.0で発生してその後修正されたバグが、今になってChromeに再来するとは……。
0554Name_Not_Found
垢版 |
2013/11/04(月) 20:26:07.56ID:???
IE10／Chrome30／Firefox24／Safari5.1.7／Opera12
リンク疑似クラスで、font-weightプロパティーの上書き指定を反映しない。
A:link {
color:red;
font-weight:900;/* bolderでも可 */
}
A:visited {
color:blue;
font-weight:100 !important;/* lighterかnormalでも可 */
}
<p>未訪問と既訪問済みを比較→
<a href="./001.html">未訪問リンク</a>／
<a href="./index.html">既訪問リンク</a>
</p>

リンク文字列の色は変ったのに、字の太さは太くなったまま変化しない。
font-weightに限っては擬似クラスA:linkでの指定が強くて、A:visitedでは上書きできない罠。
これは全ブラウザで一致するみたいなので、バグでなく仕様なのか？
と思ったが、該当する記述は仕様書に見当らなかった。
http://www.asahi-net.or.jp/~BD9Y-KTU/htmlrel_f/W3Ccss1/index.html#anchor-pseudo-classes
http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#link-pseudo-classes
http://momdo.s35.xrea.com/web-html-test/spec/CSS21/fonts.html#font-boldness
0555Name_Not_Found
垢版 |
2013/11/04(月) 20:30:19.86ID:???
>>554
>IE10／Chrome30／Firefox24／Safari5.1.7／Opera12
>これは全ブラウザで一致するみたいなので
間違った。
Opera12.16だけは、a:visitedでのfont-weightの上書き指定が有効だった。
0556Name_Not_Found
垢版 |
2013/11/04(月) 20:31:12.61ID:???
それは仕様。

http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#the-link-pseudo-classes-link-and-visited
Note: It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.
UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.

の範囲内の動作。
0557Name_Not_Found
垢版 |
2013/11/04(月) 21:12:19.47ID:???
>>556
邦訳だと、ここだね。
http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/#the-link-pseudo-classes-link-and-visited
Note: スタイルシート製作者は :link, :visited 擬似クラスを悪用し、ユーザーがどのサイトにアクセスしたかをそのユーザーの承諾なしに知ることができる。
このため、UA はすべてのリンクを未訪問として扱う、もしくはそれぞれのリンクを表示する際ユーザーのプライバシーに配慮した方法を実装するなどの方法をとることができる。


でも、それなら、色は変化するのに太さは変化しないって、整合性がないよ。
やっぱちょっと異常な挙動ではある。
0558Name_Not_Found
垢版 |
2013/11/14(木) 07:15:01.69ID:???
Chrome 30.0.1599.101 m ／ Safari5.1.7
>>550のソースで、縦書き段内の横スクロールをした場合。
その文中にA要素があると、a:hoverをセレクタにした指定が効かなくなる。
横スクロールを動かさない初期状態だと、リンク・アンカーにカーソル乗せれば指定通りに背景色等が変化した。
.tategakiへのwidth指定でoverflowが発生するとこのバグが生じる。
普通の横書きでは段落ボックス内でoverflowの縦スクロールを動かしても、問題無し。
0560Name_Not_Found
垢版 |
2013/11/19(火) 22:53:03.13ID:???
Windows8.1＋IE11
font-family:"欧文フォント","和文フォント",sans-serif;とすると、和文フォントの指定が無視される。

body {font-family:"Verdana","ＭＳ Ｐゴシック",sans-serif;}
→ＭＳ Ｐゴシックが無視され、sans-serifのメイリオで表示される。
Verdanaを後ろにする（もちろん半角英数はVerdanaでなくなる）か、
sans-serifを取り除くとＭＳ Ｐゴシックが反映される。
0562Name_Not_Found
垢版 |
2013/11/20(水) 22:30:07.69ID:???
Google Chrome 31.0.1650.57m
Safari5.1.7

list-style-image指定時に画像非表示にするとリストマーカーまで消える。

<ul style="list-style-image:url(mark.jpg); list-style-type:square;">
<li>AAA</li>
<li>BBB</li>
</ul>
代替表示されるはずのlist-style-typeプロパティで指定したリストマーカーも表示されない。
IE10やFirefox25では、画像非表示でもリストマーカーは表示された。
仕様書には「画像が利用可能の場合、'list-style-type'で設定したマーカーと置き換える」とある。
http://momdo.s35.xrea.com/web-html-test/spec/CSS21/generate.html#propdef-list-style-image
画像が利用可能でない場合は置換せずにマーカーを表示すべき筈。

Cf.存在しない画像をリストマーカーに指定するとリストマーカーが完全に消える
http://pentan.info/stylesheet/bug/mozilla026.html
0563Name_Not_Found
垢版 |
2013/11/20(水) 22:43:31.39ID:???
>>561
「font-family:"Verdana","ＭＳ Ｐゴシック","MS PGothic",sans-serif;」ではダメだった。
sans-serifを外したり、monospaceに書き換えるとちゃんとＭＳ Ｐゴシックで表示されることから、
「sans-serif」の処理に問題がありそうな感触。

「font-family:"Verdana","MS PGothic",sans-serif;」だとどうなるかは、今度試してみる。
0565Name_Not_Found
垢版 |
2013/11/21(木) 22:27:50.54ID:???
>>564
何だかんだ試してみて、以下のことが分かった。>>560を訂正。

Windows8.1+IE11
・「font-family:"欧文フォント", "和文フォント";」とすると、和文フォントの指定が一切無視される。

欧文フォントについては適用されるが和文フォントの指定が無視されて、
和文はIEの標準フォント（ツール＞インターネットオプション＞フォントで指定したフォント）で表示される
（>>560のケースは標準フォントもMS PGothicだったから、指定が効いたんだと勘違いしていた）。

ただし欧文フォントの後ろに「sans-serif」と「serif」が指定されると無視されず、
sans-serifはメイリオで、serifは（おそらく）MS P明朝で表示される。
それ以外のmonospaceやfantasyなどについても無視されて、IEの標準フォントで表示される。
0566Name_Not_Found
垢版 |
2013/11/22(金) 21:09:54.35ID:???
【Google Chrome 31】【Sagari5.1.7】
代替スタイルシートによって縦書き指定（-webkit-writing-mode:vertical-rl）を適用すると、リストマーカー画像の位置が左にずれたり消えたりする。

<link rel="stylesheet" type="text/css" href="./default.css" hreflang="ja" charset="Shift_jis" media="screen,print,projection,tv">
<link rel="alternate stylesheet" type="text/css" href="./tate.css" hreflang="ja" charset="Shift_jis" media="print, screen" title="縦書き版">
<body>
<script type="text/javascript"><!--
ChangeStyle = function( name ){
// 代替スタイルシート切替スクリプトは右記を拝借→ http://www.usamimi.info/~geko/arch_web/02_sample/018/index.html
}//-->
</script>
<select onchange="sn=this.options[this.selectedIndex].value;if(sn)ChangeStyle(sn);">
<option value="Main">default</option><option value="縦書き版">縦書き版</option>
</select>
<div class="tategaki">
<ul><li>あいうえお</li><li>ああああ</li><li>aaaaa</li></ul>
</div>
</body>

/* default.cssの中身 */
ul {list-style-image:url(./mark.jpg);}
/* tate.cssの中身 */
.tategaki {
-webkit-writing-mode:vertical-rl;/* Chrome用 */
writing-mode:vertical-rl;
writing-mode:tb-rl;/*For under IE8*/
}

tate.cssを読み込むlink要素でrel="alternate stylesheet"をrel="stylesheet"にして
最初から縦書きを適用すると、この不具合は起きない。
なぜか代替スタイルシートで適用した直後だけ、リストマーカー画像が左に半行分以上ズレて、本来上に来るべき行より左の行の上に掛かって表示される。
>>562もだが、Webkit系のlist-style-imageのレンダリングはちょっと問題含みか。
0567Name_Not_Found
垢版 |
2013/11/22(金) 21:28:11.99ID:???
>>566の問題を下記で代用して解決できる。

tate.cssに下記を追記し、list-style-imageでなくbackground-imageでリストマーカーを画像にする。

/*===WebKitハックでGoogleChrome（とSafari）のみに適用===*/
@media screen and (-webkit-min-device-pixel-ratio:0){
.tategaki ul {-webkit-padding-start:20px;}
.tategaki ul li {
list-style:none;
padding-top:20px;
background: url(./mark.jpg) no-repeat right top;
}
}/**Safari・Chrome対策**/

<ul>
<li>さしすせそ
<ul>
<li>たちつて</li>
<li>なにぬねの</li>
</ul>
</li>
<li>ＡＢＣＤＥ</li>
<li>あいうえお<br>ああああ<br>aaaaa</li>
</ul>

ところが、これでもGoogle Chrome（とSafari）で別の不具合が生じた。
代替スタイルシート適用直後、リスト一行目のリストマーカー画像が消えたり、右半分欠けたりする。
そこでdefaultスタイルに戻してから再度代替シートに切換すると、まともに表示される。
しかしページ再読み込みして、また代替スタイルシートで縦書きを適用すると、やはり一行目のliの背景画像だけ消える。
なにこれ？
0568Name_Not_Found
垢版 |
2013/11/22(金) 22:15:59.31ID:???
>>544の解決法。→　body {height:100%} を指定しておく。
しかし、WinIE7標準モードで発生する別のバグにはそれだけでは不足。
>>544のソースのDOCTYPE宣言を変更して標準モードにし、IE7で閲覧する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";>
<html lang="ja"><head>
<meta http-equiv="X-UA-Compatible" content="IE=7;IE=emulateIE7">
またはIE8〜10でF12開発者ツールを使ってドキュメントモードをIE7標準にして閲覧する。
ソースは下記の通り。互換モードやIE8標準〜IE10標準だとこのバグは起きない。
.tategaki {
writing-mode:vertical-rl;
writing-mode:tb-rl; /*For under IE8*/
-webkit-writing-mode:vertical-rl;
overflow-x:auto;
height:50%;
width:95%;
}
<body>
<div class="tategaki" id="COL1">
<p>ここに一段目の縦書きのテキストが入ります。</p>
<p>折り返される長文にする。長文にする。長文にする。長文にする。長文にする。長文にする。長文にする。長文にする。</p>
<p>以下繰り返しで横スクロールが生じる幅を出す。</p>
<p>以下繰り返しで横スクロールが生じる幅を出す。</p>
<p>……横スクロールが出るまでコピー＆ペースト繰り返し……</p>
</div>
<div class="tategaki" id="COL2">
<p>ここは二段目になります。</p>
</div>
すると、なぜか横スクロールが発生した分だけ長文が折り返されなくなるバグが発現した。したがって縦組み段の高さがどんどん伸びる。
これへの対処法としては、body {height:100%} だけでは足りない。
body, html {height:100%;} とhtml要素にも指定すると、バグは解消した。
0569Name_Not_Found
垢版 |
2013/11/23(土) 11:52:59.97ID:???
>>550のSafari5.1.7の縦書きでのバグについて。
Safariブラウザのウィンドウを垂直に伸ばすと縦書きボックスの横幅も増えてゆく。
つまり>>544のIEバグと似て、縦の高さ（height）がなぜか横幅の長さにまで影響するバグだった。
そこで>>568の解決法を試して、body, html {height:100%;} としてみた。
すると>>550後半のStrictモード時に縦書きの各段毎の横スクロールが出なくなる不具合だけは解消した。
しかし依然としてbody内の縦書きボックスのwidthが画面表示領域の高さと連動するバグは出る。
Safari6以降では修正されたのかな。
0570Name_Not_Found
垢版 |
2013/11/24(日) 02:54:41.24ID:???
【IE5Quirks／IE7〜9互換モード】
定義リスト（dl要素）を横並びさせる際、dd要素内でem要素が折り返される長さだけあると横に並ばなくなる。
定義リストをfloatで横並びにして表組み風にするのは、よくある。
Cf. http://blog.d-spica.com/entry/080512dtfloat.html
その際、IE6において、dt要素の高さよりdd要素内の段が高い場合、dtの横に隣接するddの一行目テキストだけ3pxほど右にずれるバグがある。
これに対処するには、zoom:1; を指定してhasLayoutをtrueにすれば解消する。
Cf. http://www.coolwebwindow.com/weblife_column/coolweb/000174.php
しかし、或る条件下では、この横並びが崩れた。
dd要素内にemなど斜体（font-style:italic;）で表示される要素があり、且つその文字列が途中で行の右端に掛かって折り返しされるのがその条件。
下記の例で、横並びにならなくなって、ddがdtの一行下から表示された。
dt {clear:both; float:left; min-width:1em;}
dd {margin-left:1.2em; zoom:1;}
<dl>
<dt><a name="n25" href="#t25">註2</a></dt>
<dd><p>……著者名，<em>折り返される長さの書名</em>，出版社，刊年，pp29-31.</p></dd>
</dl>

zoom:1;を削るか、em {font-style:normal} とすると、floatが効いて横並びに戻った。
0572Name_Not_Found
垢版 |
2013/11/28(木) 01:53:22.39ID:???
よくremを使ったフォントサイズ指定で

html { font-size: 62.5%; }
body { font-size: 1.4rem; }

なんていうのがブログ等で紹介されているけど、
現状バージョンのChromeでフォントサイズの継承かおかしいのか
変更になったのかわからんがフォントサイズがおかしくなってしまう。

ttp://stackoverflow.com/questions/20099844/chrome-not-respecting-rem-font-size-on-body-tag
0573Name_Not_Found
垢版 |
2013/12/06(金) 16:08:46.35ID:???
Safariでテーブルにダッシュのボーダーの要素thやtdに幅いれると隙間あくのバグかな
0574Name_Not_Found
垢版 |
2013/12/24(火) 15:00:14.92ID:???
とりあえずこのスレでいいのかな…ちょっとコレ見て欲しい。
(1<<32)-1は0になるので(1<<30)*4-1で読み替えてもらうとして、
環境によっては49.7日問題が出ない代わりに上限が0x7fffFFFFミリ秒までになる。
0x7fffFFFFミリ秒あれば普通は十分だろうけど、32ビットフルで使えないのはバグな気もする。

JavaScript 3
http://toro.2ch.net/test/read.cgi/tech/1380177260/124
124 名前：デフォルトの名無しさん[sage] 投稿日：2013/12/22(日) 03:38:15.71
ググっても
http://ap.atmarkit.co.jp/bbs/core/fjava/20589
http://ap.atmarkit.co.jp/bbs/core/fdotnet/20546
しか話が出てこないけどさ、JScriptのsetTimeoutって普通に49.7日問題発生するよな？
多分、timeout+starttime<GetTickCount()的な判定なんだと思うけど、
setTimeout("alert(0);",(1<<32)-1);とかだと普通に0秒でタイムアウトしてしまう。

応用すれば対象PCの起動からの時間も49.7日以下なら計測可能という。
例：http://jsbin.com/aBegAMI/2
WindowsXP SP3(32bit)+IE8はコレでシステム起動時間もどきを取れるの確認したけど、他だとどーよ？
0575Name_Not_Found
垢版 |
2013/12/30(月) 05:09:11.98ID:???
WinXP・IE7
縦書きwriting-mode:tb-rl;適用時、font-familyで和文OpenTypeFontを指定すると、字間ピッチが変に詰まる。
0576Name_Not_Found
垢版 |
2015/03/17(火) 10:24:59.26ID:???
ブラウザーモードIE10
ドキュメントモード IE8標準・IE9標準・Quirks・標準
<ul>
<li><del><p>リスト１</p></del></li>
<li><ins><p>リスト２</p></ins></li>
</ul>

・リスト１
・リスト２

となるべきが、
・
　リスト１
・
　リスト２
となる。
IE5Quirksでは不具合は生じなかった。Firefox36やGoogle Chromeでも問題無し。
IEだけのバグ。
また、下記のソースにすると、ズレは起きない。
<li><p><del>リスト３</del></p></li>
<li><del>リスト４</del></li>
0578Name_Not_Found
垢版 |
2015/11/08(日) 20:27:40.40ID:aoSagCoy
ぬるぽ
0581Name_Not_Found
垢版 |
2018/02/18(日) 20:19:11.30ID:???
☆ 日本の、改憲を行いましょう。現在、衆議員と参議院の
両院で、改憲議員が３分の２を超えております。
『憲法改正国民投票法』、でググってみてください。国会の発議は
すでに可能です。平和は勝ち取るものです。お願い致します。☆☆
0582Name_Not_Found
垢版 |
2018/05/01(火) 21:55:26.87ID:l1wYHpV1
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』

AFLZE
0583Name_Not_Found
垢版 |
2018/12/30(日) 10:46:45.78ID:???
久し振りにHTML・CSSをいぢってるんだが、いまだIE11がバグで足引っ張るんだなあ。
フォント指定でヒラギノや游明朝・ゴシックや小塚明朝・ゴシックにするだけで文字の位置が上にズレ。
h1 {font-family: KozMinPr6N-Regular, '小塚明朝 Pr6N R', serif;}
下に続く要素との間にヘンな余白が空く。
ＩＥ11は先日マイナー・バージョンアップしたけど直ってない。
何なのこれ。
先頭に欧文フォント指定すればバグ回避できるけど、半角英数字は当然欧文フォントで表示され不統一に。
h1 {font-family: "Times New Roman", KozMinPr6N-Regular, '小塚明朝 Pr6N R', serif;}
しかも、三点リーダー「…」なんかは欧文式にベースライン表示の「...」になる罠。

CSSでfont-familyに小塚ゴシックを使うときに注意すること
https://www.emuramemo.com/entry/2015/03/31/194850
IEで「游ゴシック／游明朝」を表示させると、文字の下側に由来不明の余白が生じる
https://answers.microsoft.com/ja-jp/ie/forum/ie11-iewindows8_1/ie%E3%81%A7%E6%B8%B8%E3%82%B4%E3%82%B7%E3%83%83/b2572d25-4877-40ce-b46d-237d52d47d37
游明朝体・游ゴシック体の使用は注意しなくてはならない・・・　やってくれるねIE先輩！
https://qiita.com/hrdaya/items/0f5985794e2a2b451ac0
【CSS】游明朝・游ゴシックがIEでずれる
https://norando.net/yumin-ie/
游を font-family で指定した時に IE で生じる謎余白対策
https://thk.kanzae.net/net/itc/t4898/
0584Name_Not_Found
垢版 |
2019/01/08(火) 21:21:58.82ID:???
>>583
源ノ明朝・源ノ角ゴシックを指定したら、逆に下に寄った。
h1 {font-family: 'Noto Serif CJK JP';}
総じて、IEはオープンタイプ・フォント（.otf）への対応が変なのでは。
ディセンダー（ベースラインより下に出た部分）を設定するディセント値WinDescenderの問題かも。
0585Name_Not_Found
垢版 |
2019/01/09(水) 01:39:17.45ID:???
>>583
>h1 {font-family: KozMinPr6N-Regular, '小塚明朝 Pr6N R', serif;}
正しくは、
h1 {font-family: 'Kozuka Mincho Pr6N','小塚明朝 Pr6N', serif;}
　参考：https://taken.jp/font-family-name-english-japanese.html
でないと、IE以外のFirefoxなんかにはフォント指定が反映しない。
しかしこれがヒラギノだと、
　font-family: "ヒラギノ明朝 ProN W6","HiraMinProN-W6";
みたいに、ウェイトまでfont-family指定に入れられるんだけど。
0587Name_Not_Found
垢版 |
2019/01/15(火) 20:33:49.93ID:???
IE10, IE11ではフォーカス時にplaceholderの表示が消えますが、Chrome、 Firefox、Safari などでは、文字を入力するまで表示され続けます。
https://qiita.com/myzkyy/items/54c19077f95f0fc1a19a

ここから派生したバグ。
条件１
・検索ボックスが、display: flex;（IEだとdisplay: -ms-flexbox;）を指定した祖先要素内にあり、フレックス・ボックスを継承。
条件２
・検索ボックスのinput要素にwidthを%単位でスタイル指定してある。
条件３
・placeholder属性が空でなく、且つプレースホルダーにfont-familyを指定してあった場合。
以上の三条件を満たす時――
フォーカス時にプレースホルダーの文字列が消えると、検索ボックスの横幅まで縮む。
逆に言ったら、通常時（非フォーカス時）は他のブラウザと違ってIE11だけ検索窓の幅が伸びてしまって、
ブラウザーのウィンドウ幅によっては続くフレックス・ボックスが折り返されたりする罠。
幅が長くなったり短くなったりする伸縮率は、プレースホルダーの文字数の長さには関係無いみたい。
widthの%指定は、width: calc(100% - 43px);とかでも駄目。width: calc(20em - 43px);なら可。

↓これは関連するか？
スマホでinputにwidth: 100％;とplaceholderを指定した時に、端末を横向きから縦向きに変更すると画面幅がおかしくなる
http://cly7796.net/wp/smartphone/if-you-change-the-direction-by-specifying-width-100-and-placeholder-for-input-a-problem-will-occur/

再現ソースは>>588
0588Name_Not_Found
垢版 |
2019/01/15(火) 20:36:41.71ID:???
>>587のバグは下記のソースで再現する。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>IE11検索窓プレースホルダー・バグ検証</tutle>
<style type="text/css">
:-ms-input-placeholder {font-family: sans-serif;}
input[type="search"] {width: 90%;}
.site-header-main {
-webkit-align-items:flex-start; -ms-flex-align:flex-start; align-items:flex-start;
display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
-webkit-justify-content:space-between; justify-content:space-between; -ms-flex-pack:space-between;
}
div, h1, form {border:1px solid red;}/*視認しやすくするため*/
</style>
</head>
<body>
<header>
<div class="site-header-main">
<div class="site-branding">
<h1>タイトル</h1>
<form role="search" method="get" action="hoge.com">
<input type="search" placeholder="検索語&hellip;" value="" name="s" />
</form>
</div>
<div class="sidemenu">右寄せメニュー〜</div>
</div>
</header></body></html>
0590Name_Not_Found
垢版 |
2019/01/15(火) 21:40:40.88ID:???
>>588追記
:-ms-input-placeholder {font-family: sans-serif;}
総称フォントでは、このsans-serifが一番ひどい。
フォーカス時は検索ボックスの幅が半分位に短くなる。つまり通常時は倍に伸びてしまってる。
monospace にすると、１文字分ほど（約1em）増減する。
serif では逆に、フォーカス時にプレイスホルダーの文字が消えると、検索窓の横幅が長くなる。伸縮率は短く0.5em程。
system-ui は挙動はserif と同じだが初期状態（非フォーカス時）の長さが少し短くなるので、伸縮率は1em位。
以下のグローバル値もsystem-uiと挙動は同じ。伸縮率も同程度に軽少。
font-family: inherit;
font-family: initial;
font-family: unset;
ちなみにIEの設定はデフォルトのまま、ツール＞インターネット オプション＞全般＞フォントで
Webページ フォントが「MS PGothic」、テキスト形式フォントが「MS ゴシック」。
0591Name_Not_Found
垢版 |
2019/01/16(水) 02:13:34.85ID:???
>>588
誤　<title>IE11検索窓プレースホルダー・バグ検証</tutle>
正　<title>IE11検索窓プレースホルダー・バグ検証</title>

それと、div.site-brandingの中で問題のinput要素の上にある要素（この場合、h1要素）の幅が長くなると、再現しないみたい。
横幅を計りやすくするため、
h1 {font-size:1em; font-weight:normal;}
<h1>一二三四五六七八九〇一二三四五六七八九〇</h1>
とする。幅20emの定規になる。
この長さを調整すると、h1の幅が18em未満の時にバグが出る。
以上はIEで 表示＞文字のサイズ＞中 にして確認した。
文字のサイズ小だと、親ボックスのwidthを決める要素（ここではh1要素）の横幅の長さが21em以上ある場合バグは起きない。
また、h1は短い文字数のままにしておいて、
input[type="search"] {width: 90%;}
に min-width:21em; を追記すると、検索入力欄の伸縮は起きなくなった。
min-widthの数値を20.6em未満にすると、バグは起きる。
>>587のバグの発生条件には、これも足すべきだった。
0592Name_Not_Found
垢版 |
2019/01/16(水) 03:27:21.38ID:???
>>583
IE11のバグまとめ
特定のフォントでテキストの下に隙間が空く。
https://qiita.com/sawadays0118/items/bd0731878e9eb49c03f5#-%E7%89%B9%E5%AE%9A%E3%81%AE%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%A7%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E4%B8%8B%E3%81%AB%E9%9A%99%E9%96%93%E3%81%8C%E7%A9%BA%E3%81%8F
「バグの現象としては、行間が膨れ上がった上にテキストの下に隙間ができるため、font-sizeが大きいほど顕著にズレが生じる。」
>>584
「Noto Sansを利用する場合はCJK jpをダウンロードして利用せずに、Noto Sans jp, Noto Sans JapaneseなどGoogle fonts経由で利用する場合は問題ないみたいです。」
0593Name_Not_Found
垢版 |
2019/01/16(水) 15:40:27.59ID:???
>>587・>>588
バグの発生条件に下記は関係無かった。
>条件１
>・検索ボックスが、display: flex;（IEだとdisplay: -ms-flexbox;）を指定した祖先要素内にあり、フレックス・ボックスを継承。
>条件２
>・検索ボックスのinput要素にwidthを%単位でスタイル指定してある。

もっと単純に、placeholder属性へのfont-family指定だけで、検索入力欄の横幅が変に伸び縮みする。
要は、input要素とplaceholder属性とでfont-familyが異なると、バグる。
<style type="text/css">
:-ms-input-placeholder {
font-family: sans-serif;/*任意のフォントで試す*/
}
</style>
<body>
<input type="text" size="22" name="word" value="" placeholder="プレースホルダーです">
</body>
「プレースホルダーです」が10文字あり、size="20"で入力欄が10文字分の横幅に表示される。
これも>>591にある通りmin-width指定でフォーカス時の横幅の変化を防げる。
　input[type="text"] {min-width: 21em;}
input要素でsize="30"と10増やすと、最小幅指定もmin-width: 31em;にしないとバグ抑止できなくなる。
size=""と空指定にした場合は、min-width: 21em;以上でバグは起きなくなった。
どのみち、指定されたフォント名次第でこの数値は上下するみたいで、不安定。
上記ソースではfont-family: system-ui;にするとバグは発生しないが、既にinput要素へのfont-family指定があると別。
プレースホルダーに対するfont-family指定自体を削除したい所だが、WordPressテーマ（twentysixteenとか）のstyle.cssでプレースホルダーへのスタイル指定がある場合等は難しい。
スタイル指定でwidthを決め打ちするのが良いかも。この場合、%指定でも可（flexを継承してないからか）。
0594Name_Not_Found
垢版 |
2019/01/17(木) 03:12:34.66ID:???
>>593
font-family: system-ui;は、IE未対応らしい。
　https://developer.mozilla.org/ja/docs/Web/CSS/font-family#Browser_compatibility
で、プレースホルダーのフォント名が親要素であるinput要素と不一致なのがいけないんだから、
:-ms-input-placeholder {font-family: inherit;}
がバグ対処法になる。祖先要素からの継承を明示するわけ。
WordPressの場合はこれを子テーマのcssファイルで上書きすれば良し。
これで、入力フォームにカーソル入れると横幅が伸び縮みする不条理は避けられるはず。
0595Name_Not_Found
垢版 |
2019/01/22(火) 02:38:40.50ID:???
>>583
>しかも、三点リーダー「…」なんかは欧文式にベースライン表示の「...」になる罠。
「三点リーダが真ん中に表示されない理由」
　http://www.koikikukan.com/archives/2013/02/27-012345.php
「三点リーダ問題、webfontでついに解決！……か？」
　http://orangeprose.ｂloｇ.fc2.ｃoｍ/ｂlog-entry-320.html
「三点リーダー(…)を真ん中に表示する方法」
　https://blog.sixapart.jp/2013-03/how-to-get-midline-ellipsis.html
「「三点リーダの表示位置」問題を完全かつ最終的に解決する」
　https://d.nekoruri.jp/entry/20130307/horizontalellipsis
U+2026の「…」ではなく、(U+22EF)の「⋯」を使うだけで真ん中に表示される日本人の大好きな三点リーダになります。
0596Name_Not_Found
垢版 |
2019/01/22(火) 19:34:51.02ID:???
【IE・Firefoxバグ】InternetExplorer11、Firefox64、GoogleChrome71、をWindows8.1で確認。
　font-familyプロパティが、@font-face内だと通常と違って和文フォントを英字名しか読み込まず日本語名を受けつけなくなる。
　また特にFirefoxではファミリー名にウェイトを附けると認識しないことがある（>>585の逆）。フォント・ファイル名なら末尾に‘-weight名’が入っても可みたいだけど、それではChromeで反映しなくなる。
　バグではなく仕様にしても、ブラウザ間の不一致がひどすぎて、使用するのに困惑する。
　OS標準インストールの和文フォント名一覧とも微妙に齟齬する。
　https://w3g.jp/sample/css/font-family#japanese
　Webフォントでなくローカル・フォントに對して@font-face内font-familyでフォント・ファミリー名を上書きして複数まとめたりする手法（下記等）が、無為になる。
　https://text.baldanders.info/remark/2018/05/using-local-fonts-in-web-pages/
　https://qiita.com/RinoTsuka/items/1e7b3ca1325e704bbc41
　https://qiita.com/ln-north/items/21bff624c5d0f8e40fe9
テストしたソースは以下。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
div {font-family: Tahoma, sans-serif; font-size:1.5rem;/*視認しやすくするため*/}
@font-face {font-family: "f01"; src: local("ＭＳ 明朝");}
.f01 {font-family:"f01";}
</style>
</head>
<body>
<div class="f01">永なふをQ9g桜咲く</div>
</body>
</html
上記"ＭＳ 明朝"の箇所に明朝体の日本語フォントを日本語名／英語名で代入して、日本語の表示がsans-serif（ゴシック体）でなくなるかを確かめた。
結果一覧は>>597
0597Name_Not_Found
垢版 |
2019/01/22(火) 19:35:40.93ID:???
>>596のテスト結果
"ＭＳ 明朝"　IE×　FF×　GC○
"MS Mincho"　IE○　FF○　GC○
"游明朝"　IE×　FF×　GC○　
"Yu Mincho Regular"　IE×　FF○　GC×
"YuMincho-Regular"　IE○　FF○　GC×
"Yu Mincho"　IE○　FF×　GC○
"YuMincho"　IE×　FF×　GC×
"ヒラギノ明朝 ProN"　IE×　FF×　GC○
"ヒラギノ明朝 ProN W3"　IE×　FF×　GC×
"Hiragino Mincho ProN"　IE×　FF×　GC○
"Hiragino Mincho ProN W3"　IE○　FF×　GC×
"HiraMinProN"　IE×　FF×　GC×
"HiraMinProN-W3"　IE○　FF○　GC×
"小塚明朝 Pr6N R"　IE×　FF×　GC×
"小塚明朝 Pr6N"　IE×　FF×　GC○
"Kozuka Mincho Pr6N"　IE×　FF×　GC○
"Kozuka Mincho Pr6N R"　IE○　FF×　GC×
"KozMinPr6N-Regular"　IE○　FF○　GC×
"KozMinPr6N"　IEC×　FFC×　GC×
"Noto Serif CJK JP"　IE○　FF○　GC○
"NotoSerifCJKjp-Regular"　IE○　FF○　GC×
"NotoSerifCJKjp Regular"　IE×　FF×　GC×
"Noto SerifCJK jp Regular"　IE×　FF×　GC×
"源ノ明朝"　IE×　FF×　GC○
"Source Han Serif"　IE○　FF○　GC○
"SourceHanSerif-Regular"　IE○　FF○　GC×
"IPAmj明朝"　IE×　FF×　GC○
"IPAmjMincho"　IE○　FF○　GC○
"IPAex明朝"　IE×　FF×　GC○
"IPAexMincho"　IE○　FF○　GC○
×印はフォント指定が表示に反映されなかったが、にも拘らず妙なことに、半角英数字の文字列だけはIEもFirefoxもTahomaでない別のフォントになった。しかもなぜかIEは総称フォントsans-serif指定を無視してserifの英数字になる。
0598Name_Not_Found
垢版 |
2019/01/22(火) 20:51:50.61ID:???
>>596
https://www.tomotanuki.com/entry/yugothic-weight
「指定するフォント名は現段階ではブラウザによってまちまちです。
ChromeとOperaは「游ゴシック」「Yu Gothic」でも標準（Regular）を指定できたりします。
ですが、Firefoxでは「Yu Gothic Medium」と英語名+ウェイトで指定しなければなりません。
これは標準（Regular）でも同じで標準（Regular）サイズをFirefoxで指定したい場合は「Yu Gothic」ではなく「Yu Gothic Regular」と指定しなければ表示されません
(ちなみに「Yu Gothic Regular」で設定すると、ChromeとOperaとIE11では表示されません)。」
「Chromeの現バージョン ( 58.0.3029.110 (64-bit) ) で英語フォント名（Yu Gothic Medium）を認識しないようです。」

Hiragino Sansフォントウェイトのcss書き方まとめ
0601Name_Not_Found
垢版 |
2019/01/22(火) 22:08:14.28ID:???
>>600
しかし"ＭＳ 明朝"のPostScript名は"MS-Mincho"らしいが、
　Cf.「フォントのPostScript名, フルネーム, ファミリーの日本語名と英語名」https://taken.jp/font-name-english-japanese.html
@font-face {font-family: "f01"; src: local("MS-Mincho");}
と指定しても、IE・Firefox・GoogleChromeどれも表示に反映されない。
0602Name_Not_Found
垢版 |
2019/01/23(水) 11:38:54.62ID:???
>>601は誤り。"MS-Mincho"でIE・Firefoxに有効だった。

>>597
>"Noto Serif CJK JP"　IE○　FF○　GC○
>"NotoSerifCJKjp-Regular"　IE○　FF○　GC×

これがRegularでない他のウェイトだと、IEのみが認識するイレギュラーな結果になる。
"Noto Serif CJK JP Bold"　IE○　FF×　GC×
"NotoSerifCJKjp-Bold"　IE○　FF×　GC×
同じ形式で下記ではどのブラウザも読み込まないのに。
"Noto Serif CJK JP Regular"　　IE×　FF×　GC×

ダウンロード　https://www.google.com/get/noto/help/cjk/
Cf. https://qiita.com/umeume66/items/01291353fc43c17da992

Google Fontsの'Noto Serif JP'も同様かね？
https://fonts.google.com/specimen/Noto+Serif+JP?selection.family=Noto+Serif+JP:400,700&;selection.subset=japanese
0603Name_Not_Found
垢版 |
2019/01/23(水) 14:03:18.00ID:???
>>596・>>597を整理して纏め直すと――
@face-fontのsrc記述子でlocal()構文を指定する場合
・使用可能なフォント名は、英文名のみ。
　フォントの日本語名はIE・Firefox無効、Google Chromeしか認識しない。
・PostScript名はChrome不可、全く効かない。
・名にウェイトが含まれると、PostScript NameであれFull Nameであれ、Chrome不可。
　Full NameはIEだとフォントのウェイト（Regular等）によっては不可。
　Full NameはFirefoxだとフォント（ヒラギノ・小塚・Noto Serif CJK JP等）によっては駄目。
・ウェイトの含まれない英語フォント・ファミリー名だけにすると、Chromeに有効。
　だがIE・FFで読み込まれないフォントもある（ヒラギノや小塚フォント等。游フォントはFFのみ不可）。

対策としては――
src: local("PostScript名"), /*IE・Firefox適用、Chrome無効*/
　　 local("Weight抜きのFont Family名")/*Chrome向け*/;
としておくしかないか。
EdgeやMacやスマホは確認できないので、できる人よろしく。
0604Name_Not_Found
垢版 |
2019/01/28(月) 03:11:07.93ID:???
バグではなく未対応だかららしいけど、混乱するので。

font-feature-settingsプロパティーは、ほぼ全てのブラウザが対応する。
https://caniuse.com/#feat=font-feature
https://developer.mozilla.org/ja/docs/Web/CSS/font-feature-settings#Browser_compatibility
しかし。
font-feature-settingsを@font-face { }内で使用すると、Firefoxでしか有効でない罠。
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face#Browser_compatibility
0605Name_Not_Found
垢版 |
2019/01/29(火) 11:53:41.59ID:???
他のブラウザではfont-feature-settingsによる字詰めが有効なのに、IE11だけ無効。
font-familyに游明朝・游ゴシックを指定すると発症。
以下で再現。

.yu {font-family:"游明朝", YuMincho;}
<div class="yu" style="font-feature-settings : 'palt';">
くし」、「ト。りょうった
</div>

Firefox64、GoogleChrome71ではちゃんと字詰めされる。
IEでも、プロポーショナルメトリクス情報を持つ他のフォント（#）にするとpaltが効いたので、これはバグと言ってよいかと。
# "ヒラギノ明朝 ProN W3"・"小塚明朝 Pr6N'"・"IPAmj明朝"・"Source Han Sans"等

Cf. https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html#palt
0606Name_Not_Found
垢版 |
2019/01/29(火) 13:02:19.34ID:???
>>605
游明朝のカーニング設定がうまくいかない話
https://qiita.com/y___k/items/7715cccafa6ac2adf2ec
Mac (10.12.6)
■ Chrome(64)、Safari(11)、Firefox(58)
Boldとpknaを組み合わせると、カーニングが無効。

Windows(10)
■ IE11
Boldとpaltを組み合わせると、カーニングが無効。
Normalとpaltを組み合わせると、カーニングが無効。

https://bulan.co/swings/css_around-characters/
Mac OS SierraのChromeで游明朝体の文字詰めが効かなかったり
0608Name_Not_Found
垢版 |
2019/02/04(月) 17:06:35.30ID:???
【Firefox65／GoogleChrome71 バグ】
IE以外で、JIS外字を表示させるとfont-familyプロパティーで総称ファミリー名serifが効かなくなる。
Win8.1で確認。

p {font-family: "游明朝",serif;}
</p>「专」：ユニコード数値文字参照（16進数）→「&;#x4E13;」</p>

鉤括弧「 」内の外字部分だけゴシック体（sans-serif）になる。

FiefoxやChromeは、初期設定で明朝体 (Serif)は游明朝が既定。
それで游明朝に無い外字は他のフォントで表示されるため、ゴシックになると推定される。
しかしserifが無効になるのは指定に反する。
IE11だと他のフォントでも指定通りserifのフォントを選んでくれる（SimSun等の中国語フォントか？）。
総称ファミリーをsans-serifにすればIEでも全てゴシック体表示になったから、IEは正しく動作してる。
ついでに、総称ファミリーをcursiveやfantasyだけにすると――
　p {font-family: cursive;}
IEでは、本文がゴシック体だが外字部分は明朝体のまま。
Firefox・Chromeでは、全てゴシック体。但しChromeでは半角英数字に変化あり。

しっかし、IEの方が正しい挙動をするのって珍しくないか。
大抵はIEが足を引っ張るのに。
Cf. http://pentan.info/stylesheet/bug/winie033.html
0609Name_Not_Found
垢版 |
2019/02/04(月) 17:09:42.04ID:???
>>608
×　「&;#x4E13;」　&の後の「;」が不要。
○　「&#x4E13;」
0610Name_Not_Found
垢版 |
2019/02/10(日) 18:52:31.49ID:???
>>608
下記ソースで再テスト。
p {font-family:Tahoma,sans-serif;}
.f01 {font-family:"游明朝";}
<p>「专」：ユニコード数値文字参照（16進数）→「&#x4E13;」</p>
<p class="f01">「专」：ユニコード数値文字参照（16進数）→「&#x4E13;」</p>
IE11ではp.f01で「 」内がsans-serifを継承せずserif（游明朝ではない何かの明朝体）になった。
やはりIEは所詮IEで、対応に問題があるみたい。
Firefox65・GoogleChrome72では「 」内はsans-serif（ゴシック体）のまま。
0611Name_Not_Found
垢版 |
2019/02/15(金) 18:30:21.46ID:???
>>602
>これがRegularでない他のウェイトだと、IEのみが認識するイレギュラーな結果になる。
>"Noto Serif CJK JP Bold"　IE○　FF×　GC×
>"NotoSerifCJKjp-Bold"　IE○　FF×　GC×

再現しない。下記の通りになった。
"Noto Serif CJK JP Bold"　IE○　FF○　GC×
"NotoSerifCJKjp-Bold"　IE○　FF○　GC×
Firefoxで反映しなかったのは、フォントキャッシュとかの問題では？
0612Name_Not_Found
垢版 |
2019/02/20(水) 18:38:10.24ID:???
>>585
>しかしこれがヒラギノだと、
>　font-family: "ヒラギノ明朝 ProN W6","HiraMinProN-W6";
>みたいに、ウェイトまでfont-family指定に入れられるんだけど。

否。ヒラギノでもフォント名にウェイト入れるとfont-family指定が反映されない。
Firefox65、GoogleChrome72、Windows8.1にて表示確認。
font-family: "Hiragino Mincho ProN W6";　/*無効*/
font-family: "ヒラギノ明朝 ProN W6";　/*無効*/
font-family: HiraMinProN-W6;　/*無効*/
font-family: "Hiragino Mincho ProN","ヒラギノ明朝 ProN"; /*有効*/
IE11では日本語フォント名の"ヒラギノ明朝 ProN W6"と"ヒラギノ明朝 ProN"だけ有効だった。
0613Name_Not_Found
垢版 |
2019/04/19(金) 18:42:32.78ID:???
>>551-553のwhite-space:nowrap;バグ、最新のChrome73になってもまだ直ってないのな。
WebKitのバグってどこに報告すれば修正してくれんのかね？
0614Name_Not_Found
垢版 |
2019/06/10(月) 21:00:12.09ID:???
>>583
>フォント指定でヒラギノや游明朝・ゴシックや小塚明朝・ゴシックにするだけで文字の位置が上にズレ
>先頭に欧文フォント指定すればバグ回避できるけど、半角英数字は当然欧文フォントで表示され不統一に。

このＩＥバグは、ただ先頭に欧文フォントを指定しても、不具合は解消しない。同時に子要素の行間を小さく指定しないと。
下記ソースで確認。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>OpenTypeフォントのIE表示</title>
<style type="text/css">
.otf {background:#ff0; font-size:6em;/*視認しやくすくするため*/
font-family:"Times New Roman",'Kozuka Gothic Pr6N', 'Yu Gothic', 'Noto Sans Japanese', 'Source Han Sans';}
.otf * {border:1px solid red;/*視認しやすくするため*/
line-height:0.1;
white-space:nowrap;/*折り返すと行が重なるので*/}
</style>
</head>
<body>
<div class="otf"><span>壹貳</span>12<a>參肆</a>34</div>
</body></html>
line-heightの値は1.0より小さい方がよいみたい。
div.otf直下の和文フォント適用部分をインライン要素タグ（<del><ins>も可）で括れば、なぜか、文字が上下にはみ出る不具合はなくなる。
欧文フォント適用部分（半角英数字や記号類）は何も括らず剥き出しで直下に置いてよし。
しかし、divの中に<p>56</p>とかブロックレベル要素を入れるとまた隙間が空く。
.otf p * {line-height:10%;}　と指定してから
<div class="otf"><p><a>56伍陸</a></p></div>
とインライン要素タグで括って中に半角英数や記号以外の日本語文字を入れると、直る。
0615Name_Not_Found
垢版 |
2019/06/11(火) 03:14:20.67ID:???
>>614
＞.otf p * {line-height:10%;}　と指定してから
これは不要だな。既に、全称セレクター*で".otf p * "に対しline-height:10%;を指定済みだから。
必要なのは、第一に、p直下の日本語文字列をインライン要素としてタグ附けすること。
それと、表示させるフォントによって{line-heightの値は上下して調整ねばならず、1.0より大きい方がいいことも。
でもボックス下部に余白が空くから、.otf , .otf * {height:1.2em;}とか、.otf p {margin:0;}とか、追記すべし。

IE11のバグまとめ > 特定のフォントでテキストの下に隙間が空く。
https://qiita.com/sawadays0118/items/bd0731878e9eb49c03f5#-%E7%89%B9%E5%AE%9A%E3%81%AE%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%A7%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E4%B8%8B%E3%81%AB%E9%9A%99%E9%96%93%E3%81%8C%E7%A9%BA%E3%81%8F
「line-heightを限りなく0に近い数値にすることでズレを回避できますが、改行した瞬間に文字が重なって終わるので現実的な解決策ではありません。」
↑これも、line-height:1%;とかやっても利き目なかったけど、font-family先頭の欧文フォント指定と掛け合せた上で２バイト文字列のどれかを<span> </span>で挟めば、行高設定次第でずれ解消が有効になるはず。
0616Name_Not_Found
垢版 |
2019/06/11(火) 03:50:16.31ID:???
>>560 - >>565
Windows8.1+IE11
・「font-family:"欧文フォント", "和文フォント";」とすると、和文フォントの指定が一切無視される。

↑これ、全く再現しないね。
font-family:Arial, 'MS Mincho';
とか
font-family:Arial, 'Yu Mincho';
とかで試したけど、ちゃんと日本語の部分は日本語フォントで描画される。
総称ファミリー名のserifを末尾に指定するかどうかも関係無し。
なんか、間違ったのか？
0617Name_Not_Found
垢版 |
2019/06/15(土) 08:07:04.60ID:???
これはCSSのバグなのかどうか……。
InternetExplorer11／Windows8.1で確認。
・フォント・サイズをその要素の横幅以上に拡大すると、IVS（＝基底文字＋VS）のVSが文字化けする。

IVS（異体字シークエンス）は、「通常の文字と同様、数値文字参照を使って書くこともできる。フォントやOS、アプリケーションが対応していない場合には、通常の基底文字のグリフが単に表示される（ことが望まれるが、VSが豆腐などで表示されてしまうことが多い）。」
　https://shiromoji.hatenablog.jp/entry/20120308/1331194033
ところが、別に「・」や「□」（豆腐）に化けてなかった文字も、フォント・サイズを一定以上に大きくすると四角になることがある。
下記一行のソースで再現できた。

<div style="font-size:51px; width:50px;">&#x9038;&#xE0101;／&#x9F4B;&#xE0101;</div>

どうもIE11はIVSを「基底文字＋VS」で２文字と計算するらしく、
それで要素の横幅がフォント・サイズ１文字分（1em）より小さいと、１文字はみ出たVSの分だけ文字化けして表示され、基底文字の下に流れて配置される。
width指定で要素の幅がfont-sizeより広く取ってあっても、box-sizing: content-box;（既定）の場合にpaddingとかborderを入れると、この不具合が発現したりする。
floatでwidtj指定を入れる場合にも、注意↓。
実例　http://wakufactory.jp/densho/font/db/mojidb2.html#09038

Firefox67やChrome75では再現しなかった。
ただ上記一行のソースは、Firefoxでは、
&#x9038;&#xE0101;／
&#x9F4B;&#xE0101;
と２行に表示され、
&#x9038;&#xE0101;
／
&#x9F4B;&#xE0101;
と３行に表示された。
「／」を「―」「■」等の記号に変更しても同様。
0618Name_Not_Found
垢版 |
2019/06/15(土) 08:10:00.98ID:???
>>617 追記修正
<div style="font-size:51px; width:50px;">&#x9038;&#xE0101;／&#x9F4B;&#xE0101;</div>
ただ上記一行のソースは、Firefoxでは、
逸󠄁／
齋󠄁
と２行に表示され、他方、Chromeでは、
逸󠄁
／
齋󠄁
と３行に表示された。
「／」を「―」「■」等の記号に変更しても同様。
0619Name_Not_Found
垢版 |
2019/06/22(土) 07:25:22.77ID:???
font-familyプロパティーの値でインストールされてないフォントのみを指定された場合、継承値を反映しなくなる難があるが、
値の末尾に総称ファミリー名の代りにinheritを指定すると、
Chrome・Firefoxでは継承値で表示されて問題は解消するものの、Internet Explorer 11では無効のまま。
環境はWindows8.1で確認。

body {font-family: YuMincho, '游明朝', serif;}
<p>例１：フリーの「<span style="font-family: 'Asebi Mincho Light','馬酔木明朝'">馬酔木明朝</span>」ってフォントがある。</p>
<p>例２：フリーの「<span style="font-family: 'Asebi Mincho Light','馬酔木明朝', inherit;">馬酔木明朝</span>」ってフォントがある。</p>
<p>例３：フリーの「<span style="font-family: 'Asebi Mincho Light','馬酔木明朝', inherit, serif;">馬酔木明朝</span>」ってフォントがある。</p>

上記ソースで、本文は游明朝（それが無ければ他の明朝体）になるが、例１の"馬酔木明朝"の文字列はゴシック体になった。
例２でスタイル設定値にinheritを足すと、Chrome75とFirefox67では游明朝になったがIE11ではゴシック体のまま。
例３で値の末尾に更に総称ファミリー名serifを追記すると、IE11だけ游明朝でなく'ＭＳ 明朝'になった。

但し、CSS仕様書を見ると、font-familyプロパティーにおけるグローバル値inheritは、フォントファミリー名や総称ファミリー名とは併記できないらしい。
Cf.「Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification 日本語訳」
15.3 フォントファミリー：'font-family'プロパティ
https://momdo.github.io/css2/fonts.html#font-family-prop
ならば厳密にはスタイルシートのバグではなくてブラウザーごとの仕様なのか？

あと、「馬酔木明朝」は下記で無料配布。
https://metasta.github.io/asebi/
0620Name_Not_Found
垢版 |
2019/06/22(土) 08:24:16.07ID:???
>>619
＞値の末尾に総称ファミリー名の代りにinheritを指定すると、
＞Chrome・Firefoxでは継承値で表示されて問題は解消する

これは指定したinheritの値が有効になったってよりも、
inheritとフォント・ファミリー名との両方を値に記すこと自体が不正で無効（invalid）な書き方だから、
font-family指定そのものが無効になって、親要素bodyへの指定だけが有効になりその値を継承した
――と解釈される。
その証拠にFirefoxでは、body {'MS PMincho'}とかプロポーショナル・フォントを指定した上で
<p>例４：フリーの「<span style="font-family: 'Asebi Mincho Light','馬酔木明朝', inherit, monospace;">馬酔木明朝</span>」ってフォントがある。</p>
<p>例５：フリーの「<span style="font-family: 'Asebi Mincho Light','馬酔木明朝', monospace, inherit;">馬酔木明朝</span>」ってフォントがある。</p>
とか総称フォント名をmonospaceにしても、等幅フォントで表示されなかったし、
<p>例６：Win8.1以降標準装備の「<span style="font-family: YuMincho,'游明朝','Yu Mincho', inherit;">游明朝</span>」ってフォントがある。</p>
とか、インストール済みのフォントファミリー名を指定しても無効になった。

IEは、値の不正な記述の仕方（「不正な値」の指定ではない）でもプロパティーそのものは無効にならない点では、バグである。
0621Name_Not_Found
垢版 |
2019/06/22(土) 08:32:00.85ID:???
>>620修正
＞body {'MS PMincho'}
body {font-family: 'MS PMincho';}
0622Name_Not_Found
垢版 |
2022/12/16(金) 23:35:39.75ID:???
>>551
>>551-553 報告のChrome30でのCSSバグは
マイナー極まるブラウザ、Falkon Version 3.1.0 でも再現する。
hrtps://falkon.org
2022年１月に出たヴァージョン3.2.0が最新だが、Windows向けには3.1.0までしか配布されてないので未見。
ウィキペディア曰く「Qt WebEngineから提供されるChromiumエンジンを使用」ってことだけど、
つまりBlinkに移行する以前のChromeに近いのか？　FalkonはWebkit系なのか？
するとWebkitの親玉Safariでも、同じバグが起きてるのかしらん。
「AppleはiOS上で動作するブラウザについて、たとえFirefoxやChromeであっても、ブラウザのレンダリングエンジンにはAppleが開発したWebKitを使うことを強制しています」
tps://news.livedoor.com/article/detail/22408540/
とすると、iPhoneではSafari以外のブラウザでもWebKit特有の問題が発生するのかも。
0623Name_Not_Found
垢版 |
2022/12/17(土) 00:16:31.58ID:???
>>622
Falkonのバグ対策（の失敗）について。

>>551の例で実験。

/* WebKit HackでGoogleChrome30とSafari5とOpera15+対策　*/
@media screen and (-webkit-min-device-pixel-ratio:0){
.navbar a {white-space:pre-wrap;}
} /* Falkonにも効く。 */

@-moz-document url-prefix() {/* Firefoxで元の指定に戻す */
.navbar a {white-space:nowrap;}
} /* Falkonには無効、ここまでバグ発生せず。 */

/* Chrome39+ハックで新Chromeや新Edgeも元の指定に戻す */
_:lang(x)::-internal-media-controls-overlay-cast-button, .navbar a {
white-space:nowrap;
} /* 新ChromeだけでなくFalkonにも効いてしまった！ 　バグが再生。 */
0624Name_Not_Found
垢版 |
2022/12/18(日) 16:26:42.99ID:???
>>622
>>551のバグは、Falkon3.1では、下記を追記すると発生しなくなった。
@media screen and (-webkit-min-device-pixel-ratio:0){
.navbar a {display:inline-block;}
}
要は、折返し禁止（white-space:nowrap;）にするa要素をインラインブロックとして扱ったら、まともにレンダリングしてくれるみたい。
上記WebKitハックによるスタイル指定は、GoogleChrome最新版（バージョン: 108.0.5359.125）でも適用されるものの、指定しない時と比べて特に変化は起きない模様。
0625Name_Not_Found
垢版 |
2022/12/18(日) 18:17:57.17ID:EoAW88W9
>>622
CSSではないけど、そもそもFalkonは行中での折返し（改行）をするアルゴリズムが何かヘン。
非表示のゼロ幅スペース（&#x200B; U+200B）を挟んでも、そこで折り返してくれない。
HTMLソースで改行してあると、そこがブラウザ表示でも改行できる位置になる。
ちなみにゼロ幅スペースを入れた直後にソースで改行すると、
ChromeやFirefoxと違ってFalkonの表示ではドット一箇分ほどの幅の隙間が空く。ゼロ幅にならない！
<wbr>タグには対応してるから、そっちを使用すればいいのかもしれんが。
0626Name_Not_Found
垢版 |
2022/12/18(日) 18:35:49.47ID:???
>>626
↓こんなソースで比較してみると。
<h1><a href="">■</a>大見出し１</h1>
<h1><a href="">■</a>
大見出し２</h1>
<h1><a href="">■</a>&#x200B;
大見出し３</h1>

Chrome108/Firefox108での表示
■大見出し１
■ 大見出し２　←■の後に一文字の三分の一程の幅のスペースが空く。
■大見出し３　←前行末にゼロ幅スペースがあるとソース改行による空白が打ち消される。

Falkon3.1.0での表示
■大見出し１
■ 大見出し２　←■の後に一文字の三分の一程の幅のスペースが空く。
■ 大見出し３　←前行末にゼロ幅スペースがあってもソース改行による空白が打ち消されない。
0627Name_Not_Found
垢版 |
2023/09/20(水) 18:01:30.13ID:???
正しいことをやりましょう
新着レスの表示
レスを投稿する

ニューススポーツなんでも実況