CSSバグリスト http://css-bug.jp/ ＠CSSバグ辞典スレッド ja Copyright 2009 Sun, 23 Nov 2008 15:45:23 +0900 http://www.sixapart.com/movabletype/ http://www.rssboard.org/rss-specification ブロック要素を含むインライン要素の右ボーダーが表示されない

例示

<div style="display:inline; border:2px dashed blue;">インライン<em style="display:block; border:2px dashed red;">ブロック</em>インライン</div>
インラインブロックインライン

青色のボーダーは文字列「インライン」の四方を囲むように表示されるはずです。

修正状況

Safari1.2.2でこの不具合が発生するそうです。

報告書き込み

WinIE確認済みバグ
インライン要素内のブロック要素がインライン要素のスタイルを継承する(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b165.html

Safari1.2.2で例示を見ると、最初のインラインという文字列の右側のボーダーだけ表示されない。

]]> http://css-bug.jp/mac/safari/ver3_under/0429/ http://css-bug.jp/mac/safari/ver3_under/0429/ Mac Safari ver.3 Under border Sun, 23 Nov 2008 15:45:23 +0900 z-indexを負の数にしたリンクを選択できない

例示

<style type="text/css">
<!--
p.test {
    background: yellow;
}
p.test a {
    position: relative;
    z-index: -1;
}
-->
</style>

<p class="test">→<a href="./">リンク</a>←</p>

→リンク←

2つの矢印の間にa要素がありますが、z-indexプロパティの指定のためp要素の背景の裏に隠れています。リンクが機能するかを確認してください。

修正状況

Safari1.2.2でこの不具合が発生するそうです。

報告書き込み

Opera確認済みバグ
z-indexを負の数にしたリンクを選択できない(7.x)
http://cssbug.at.infoseek.co.jp/detail/opera/b086.html

Safari1.2.2でも発生。

]]> http://css-bug.jp/mac/safari/ver3_under/0428/ http://css-bug.jp/mac/safari/ver3_under/0428/ Mac Safari ver.3 Under z-index 負数 Sun, 23 Nov 2008 15:45:21 +0900 擬似要素の文字列を拡大縮小できない

例示

<style type="text/css">
<!--
p.test:first-letter {
    font-size: 100%;
    color: blue;
}
-->
</style>

<p class="test">擬似要素</p>

擬似要素

ブラウザの機能を用いて文字サイズを変更しても「擬」の文字サイズが変化しないそうです。

修正状況

Safari1.2.2でこの不具合が発生するそうです。

報告書き込み

safariで :first-letter の文字サイズがブラウザの文字拡大縮小についていかないのだけ ど

↑Macの人、誰か確認してくれませんか。

Safari1.2.2(一番新しいやつ)で試してみたが、確かに拡大縮小されない。
まあ、特に困らないけど。

]]> http://css-bug.jp/mac/safari/ver3_under/0422/ http://css-bug.jp/mac/safari/ver3_under/0422/ Mac Safari ver.3 Under 擬似要素 Sun, 23 Nov 2008 15:45:20 +0900 font-familyを指定した文字のボールドが文字化け

例示

<p style="font-family:Osaka,sans-serif; font-weight:bold;">font, bold</p>
<p style="font-family:Osaka,sans-serif;">fontfont,
<span style="font-weight:bold;">bold</span></p>

font, bold

fontfont, bold

ボールドにした部分が文字化けするそうです。

修正状況

Safari1.2でこの不具合が発生するそうです。

報告書き込み

既出だったらすみません。
safari1.2(v125)で
font-familyを指定した文字を太字にすると文字化けます。
どんなフォントを指定しても、bタグでもbold指定でも文字化けます
バグですよね？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="ja">
<head>
<title>bold</title>
<style type="text/css">
<!--
.fmly{
font-family:Osaka;
}
.fmlyb{
font-family:Osaka;
font-weight:bold;
}
.bld{
font-weight:bold;
}
-->
</style>
</head>
<body>
<span><b>fontbold</b></span><br>
<span class="fmly">font<span class="bld">bold</span></span><br>
<span class="fmlyb">fontbold</span>
</body>
</html>

]]> http://css-bug.jp/mac/safari/ver3_under/0420/ http://css-bug.jp/mac/safari/ver3_under/0420/ Mac Safari ver.3 Under font-family font-weight 文字化け Sun, 23 Nov 2008 15:45:18 +0900 インラインフレームをwindow.nameで正しく参照できない

例示

<script type="text/javascript">
<!--
function change(uri) {
    self.iframe1.location.href = uri;
}
// -->
</script>

<div>
    <iframe name="iframe1" src="fig2.html" style="width:400px; height:100px;" id="iframe1"></iframe>
</div>
<p><a href="javascript:change('fig1.html');">インラインフレームで表示するページ1</a></p>
<p><a href="javascript:change('fig2.html');">インラインフレームで表示するページ2</a></p>

インラインフレームで表示するページ1

インラインフレームで表示するページ2

それぞれのリンクに指定したJavaScriptを実行すると、インラインフレーム内に表示されているページが変わるはずです。

修正状況

Safari1.2でこの不具合が発生するそうです。

報告書き込み

CSSではないんですが、、、。
Safari1.2でiframeをつかったときに、window.nameがうまく解決されず
iframeのなかのhtmlを変更しようとすると、新しくWindowがひらいてしまいます。
既知の問題でしょうか？

]]> http://css-bug.jp/mac/safari/ver3_under/0406/ http://css-bug.jp/mac/safari/ver3_under/0406/ Mac Safari ver.3 Under iframe Sun, 23 Nov 2008 15:45:16 +0900 固定レイアウト表で%値指定の列幅が100%を超えられない

例示

<table border="2" style="table-layout:fixed; width:200px;">
    <tr>
        <td style="width:200px;">200px</td>
        <td style="width:100px;">100px</td>
    </tr>
</table>
<table border="2" style="table-layout:fixed; width:200px;">
    <tr>
        <td style="width:100%;">100%</td>
        <td style="width:50%;">50%</td>
    </tr>
</table>
200px 100px
100% 50%

どちらの表も1列目の幅が200px、2列目の幅が100pxになるはずです。

スクリーンショット

【固定レイアウト表で%値指定の列幅が100%を超えられない】のスクリーンショットと同様の状態になるそうです。

報告書き込み

【Mozilla】と【Safari】
列幅が%指定された固定レイアウトの表で、列幅合計が
100%を超える場合に、列が指定幅にならない。

table {
width: 300px;
table-layout: fixed;
}
td {
background: red;
}

<table>
<col style="width: 420px"><col style="width: 180px">
<tr><td>x</td><td>y</td></tr>
</table>

<table>
<col style="width: 140%"><col style="width: 60%">
<tr><td>x</td><td>y</td></tr>
</table>

<table>
<col style="width: 70%"><col style="width: 30%">
<tr><td>x</td><td>y</td></tr>
</table>

CSS仕様書には、固定レイアウトの表では、表の幅は、
列幅合計と表のwidth指定のうち大きい方を採用すると
あります。

>>36 のソースでは、<table>のwidthは300pxだから、
1つ目2つ目の表は同じ列幅を表しています。そして、
列幅合計が共に300pxを超えるので、結果両方とも
600pxほどの幅の表になるべきですよね。

ところが、MozillaとSafariは、1つ目の表は正しく表示
しますが、2つ目の表は3つ目と同じ表示になります。

つまり、140%, 60% と指定すると、これを合計100%
に変換して 70%, 30% の幅で表示してしまうようです。
しかし、この動作は仕様書には合わないと思います。

なお、自動レイアウトの場合は、最終的にアルゴリズムは
自由とあるので、この動作でも仕様書に違反するとは言え
ないと思います。

]]> http://css-bug.jp/mac/safari/ver3_under/0394/ http://css-bug.jp/mac/safari/ver3_under/0394/ Mac Safari ver.3 Under %指定 fixed table Sun, 23 Nov 2008 15:45:15 +0900 一部のボーダーはcolorの値を引き継がない

例示

<div style="border:2px dashed blue;">dashed</div>
<div style="border:2px dashed; color:blue;">dashed</div>
<div style="border:4px ridge blue;">ridge</div>
<div style="border:4px ridge; color:blue;">ridge</div>
dashed
dashed
ridge
ridge

これは【一部のボーダーはcolorの値を引き継がない】の例示と同じものです。WinIEと同じ症状ということなので、4番目のdiv要素のボーダーだけが青色にならないはずです。

修正状況

Safari1.2でこの不具合が発生するそうです。

報告書き込み

確認済みバグ WinIE
一部のボーダーはcolorの値を引き継がない(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b123.html

Safari1.2で閲覧したら同じ症状が発生しました。

]]> http://css-bug.jp/mac/safari/ver3_under/0385/ http://css-bug.jp/mac/safari/ver3_under/0385/ Mac Safari ver.3 Under border Sun, 23 Nov 2008 15:45:14 +0900 擬似クラスで文字列の一部分の前景色が変わらない

例示

<style type="text/css">
<!--
a:link, a:visited {
    color: blue;
}
a:hover {
    color: red;
}
-->
</style>

<p><a href="./" style="font:200% 'Times New Roman',serif;">gjpqy</a></p>

gjpqy

文字列はTimes New Romanフォントで表示しています。Safariではマウスポインタ等を乗せたときにアンダーラインより下の部分の前景色が赤色にならないそうです。

補足

フォントによって不具合の発生状況が変わるそうです。

  • ヒラギノフォント：ディセンダの部分で不具合が発生する。
  • Osaka：不具合は発生しない。
  • Times New Roman：ディセンダの部分で不具合が発生する。
  • VT100：文字の中心より下の領域で不具合が発生する。

また文字列をイタリック体などで表示すると、ノーマルで表示したときに比べて右にはみ出す部分でも同様の現象が発生します。

修正状況

Safari1.2でこの不具合が発生するそうです。

報告書き込み

リンク要素の下線より下にはみ出した部分の文字の色を変えられない（Safari1.2）

a:visited { color: purple; }
a:hover { color: green; }
a:active { color: maroon; }

<a href="">jpg</a>

jやgなどの下線より下にはみ出した部分の色が疑似要素による指定で変えられない。
下線を消しても発生する。

>フォント（の設計）によって結果が異なるかも
試してみたところ、ヒラギノ系では発生しましたがOsakaでは発生しませんでした。
また斜体したり、筆記体のようなフォントにすると左右にはみ出した部分の色が変わらなくなりました。

>>943
フォントによります。Times New Romanでは発生しました。
またどの部分から色が変わらなくなるかはフォントによって違うようです。
VT100だと下線どころか中心から下半分の色が変わりません。
>>944
Hiragino Maru Gothic Pro
Hiragino Kaku Gothic Pro
Hiragino Kaku Gothic Std
Hiragino Mincho Pro
と指定するとヒラギノになります。W3といった文字の太さは指定できませんが。

]]> http://css-bug.jp/mac/safari/ver3_under/0383/ http://css-bug.jp/mac/safari/ver3_under/0383/ Mac Safari ver.3 Under background 擬似クラス Sun, 23 Nov 2008 15:45:12 +0900 html要素に指定されたtransparent背景の扱いが不正

例示

<style type="text/css">
<!--
html {
    background: transparent;
}
body {
    margin: 30px;
    background: #808080;
}
-->
</style>

body要素のマージン領域は灰色で塗りつぶされるはずです。

実際の表示については検証ページをご覧ください。

修正状況

  • Safari1.2でこの不具合が発生するそうです。
  • Safari1.0でこの不具合は発生しないそうです。

報告書き込み

今週リリースされたばかりの Safari 1.2 です。

* {
color: inherit;
background: transparent;
}
BODY {
color: #000000;
background: #ffcccc;
margin: 1em 10%;
}

こういうようなスタイルを使っていたら、BODY の margin 部分に
背景色が付かなくなりました。ちなみに、全称セレクタはユーザー
スタイルの効果を消すために使っています。どうも、

HTML { background: transparent; }
BODY { background: #ffcccc; }

となっている時に HTML 要素の背景色をキャンバスの背景色として
採用してしまうようです。CCS2 によれば、HTML 要素の背景色が
transparent の場合は BODY 要素の背景色をキャンバスの背景色と
すべきとあります。

この問題は、Safari 1.0 などでは起こりません。1.2 になって
発生するようになりました。

]]> http://css-bug.jp/mac/safari/ver3_under/0363/ http://css-bug.jp/mac/safari/ver3_under/0363/ Mac Safari ver.3 Under background html transparent Sun, 23 Nov 2008 15:45:11 +0900 フロートが先行要素の下辺より上に置かれる

例示

<form action="./">
    <dl>
        <dt style="float:left; clear:left; width:6em;">Textarea</dt>
        <dd style="margin-left:6.5em;"><textarea style="width:10em; height:4em;"></textarea></dd>
        <dt style="float:left; clear:left; width:6em;">Input</dt>
        <dd style="margin-left:6.5em;"><input type="text" style="width:10em;" /></dd>
    </dl>
</form>
Textarea
Input

Safariではinput要素の入力ボックスがtextarea要素の入力ボックスに重なるそうです。

報告書き込み

dt{
width : 8em;
float : left;
clear : left;
}
dd {margin-left:8.5em;}
<dl>
<dt>name</dt>
<dd><input></dd>
<dt>message</dt>
<dd><textarea></textarea></dd>
<dt>password</dt>
<dd><input></dd>
</dl>
とやると、Mac+Safariでpassword入力欄がtextareaに重なるらしい。
詳しいソースは質問スレッドの507。
>textareaだけrow属性のため他より高さがあるんだよね。
>たぶんSafariはこのバグと同じ解釈なのでは。
>
>先行するフロートの上方に後続のフロートが置かれる
>http://cssbug.at.infoseek.co.jp/detail/winie/b093.html
>http://cssbug.at.infoseek.co.jp/detail/opera/b044.html

]]> http://css-bug.jp/mac/safari/ver3_under/0362/ http://css-bug.jp/mac/safari/ver3_under/0362/ Mac Safari ver.3 Under float Sun, 23 Nov 2008 15:45:09 +0900 先に指定した代替スタイルシートを固定スタイルシートとして扱う

例示

<head>
<link rel="alternate stylesheet" type="text/css" href="......" title="......">
<link rel="stylesheet" type="text/css" href="......">
</head>

このように代替→固定（優先）の順にスタイルシートを指定すると、まれに代替スタイルシート内のスタイル指定が初めから適用されてしまうことがあるそうです。

修正状況

Safari（v85.6 OS10.2）で不具合が発生するそうです。

報告書き込み

safari
link要素にtype属性を指定した上で外部CSSを読み込んだ場合、
先頭に記述したlink要素を固定スタイルシートとして認識する。

<link rel="ALTERNATE STYLESHEET" type="text/css" href="daitai.css" title="代替スタイル">
<link rel="STYLESHEET" type="text/css" href="kotei.css">
とすると、kotei.cssとdaitai.cssの両方が読み込まれる。

<link rel="ALTERNATE STYLESHEET" type="text/css" href="daitai.css" title="代替スタイル">
<link rel="STYLESHEET" type="text/css" href="yusen.css" title="優先スタイル">
とすると、daitai.cssのみが読み込まれる。

Safari(v85.6 OS10.2)については、
「代替スタイルシートを、優先・固定スタイルより先に記すと、
代替が固定として認識されることがありうる」
でした。
代替の後ろに記述するのが優先なら確率1/2くらい、固定なら1/3?5くらい。
同じソースをリロードする度に、表示が変わるけど、法則と原因は不明。
昨日はtype属性を消してみたり、記述順を変えたり、いろいろな条件を試していて、
偶然、type属性を記述した時にのみ、症状が出ていた様子。

]]> http://css-bug.jp/mac/safari/ver3_under/0343/ http://css-bug.jp/mac/safari/ver3_under/0343/ Mac Safari ver.3 Under Sun, 23 Nov 2008 15:45:07 +0900 一部のフォントでボールド表示ができない

例示

<p style="font-weight:bold;">ABCDE日本語</p>

ABCDE日本語

1バイト英字の部分はボールドで表示されるが日本語の部分はボールド表示にならないそうです。

補足

Safariの環境設定で標準フォントを何にしているかによって結果が異なるようです。

  • 日本語の部分がボールドにならないフォントの例
    • Times（Safariの初期設定）
    • Osaka
    • 太ゴB101（モリサワNewCID）
  • 日本語の部分がボールドになるフォントの例
    • ヒラギノフォント
    • 新ゴ（モリサワNewCID）
    • 小塚フォント

修正状況

Safari1.0でこの現象が発生するそうです。

]]> http://css-bug.jp/mac/safari/ver3_under/0333/ http://css-bug.jp/mac/safari/ver3_under/0333/ Mac Safari ver.3 Under font-weight Sun, 23 Nov 2008 15:45:04 +0900 使用されるはずのないフォントで文字列が表示される

例示

<p style="font-family:Times,'小塚明朝 Std R','Kozuka Mincho Std',serif;">CSSを使用する</p>
<p style="font-family:Arial,Osaka;">CSSを使用する</p>

CSSを使用する

CSSを使用する

2つの例があります。前者は日本語文字が小塚明朝ではなくヒラギノ明朝で、後者は日本語文字がOsakaではなくヒラギノ角ゴで表示されるそうです。

修正状況

Safari1.0でこの現象が発生するそうです。

]]> http://css-bug.jp/mac/safari/ver3_under/0332/ http://css-bug.jp/mac/safari/ver3_under/0332/ Mac Safari ver.3 Under font-family Sun, 23 Nov 2008 15:45:01 +0900 ファイル名にアンダーバーを含む外部スタイルシートを読み込まない

例示

<link rel="stylesheet" type="text/css" href="fig2_.css" title="ファイル名にアンダーバーを含むスタイルシート" />

「fig2_.css」が読み込まれていれば文字が青になります。

実際の表示については検証ページをご覧ください。

修正状況

Safari1.0でこの不具合が発生するようです。

報告書き込み

http://pc2.2ch.net/test/read.cgi/hp/1057645762/12-13n >●外部リンクCSSファイル名に「＿」（アンダーバー）を使うと >Safariでは読み込まないのでご注意！

]]> http://css-bug.jp/mac/safari/ver3_under/0303/ http://css-bug.jp/mac/safari/ver3_under/0303/ Mac Safari ver.3 Under Sun, 23 Nov 2008 15:44:59 +0900 :hover擬似クラスでvertical-alignが無効

例示

<style type="text/css">
<!--
a:hover {
    background: aqua;
}
a:hover img {
    vertical-align: bottom;
}
-->
</style>

<p style="font-size:24px;"><a href="./">img<img src="http://css-bug.jp/img/common/img01.png" alt="img" /></a></p>

imgimg

リンクが:hover状態にないとき、画像の下端はベースラインに揃っています（'m' の下端に揃う）。リンクが:hover状態になると、画像の下端は行ボックスの下端に揃う（'g' の下端に揃う）はずです。

修正状況

リンクが:hover状態にないとき、画像の下端はベースラインに揃っています（'m' の下端に揃う）。リンクが:hover状態になると、画像の下端は行ボックスの下端に揃う（'g' の下端に揃う）はずです。

]]> http://css-bug.jp/mac/safari/ver3_under/0357/ http://css-bug.jp/mac/safari/ver3_under/0357/ Mac Safari ver.3 Under :hover vertical-align Sun, 23 Nov 2008 15:44:57 +0900