2012-01-17 9 views
2

を示していない。:唯一の子は、私はこの作業を取得しようとしている/ Webkitの中でSafariの

<!doctype html> 
<html> 
<style> 
    section{ 
     display: none; 
    } 
    section:only-child { 
     display: block; 
    } 
</style> 
<body> 
    <section>This should be visible</section> 
</body> 
</html> 

は、私は、テキスト「これは見えるはずが」見えるはずと信じています!これはFirefoxでもそうです。 FirebugとSafariのWeb Inspectorは同様にそう考える。

Safari(OSXとiPhone)でページを開くと、テキストが表示されません。どうしてこれなの?

答えて

3

あなたのコードをdoctypeと非HTML5要素(div)でテストしました。私がテストできるすべてのWebkitブラウザには、Safari-on-Windows 5、Chrome Windows、Chrome Linux、Epiphany-webkitの問題がありました。

しかし、表示状態から背景色に変更したとき、Webkitは正常に動作しました。 floatのような他の表示状態を変更してもうまくいきました。

これはまさにバグです(検索エンジンでは表示されませんでしたが、bugs.webkit.orgは検索しませんでした)。要素が最初にブロックされるように設定されていて、only-childがnoneに設定されている場合は、display:noneをオーバーライドするように指定するとうまくいきます。オープニング要素インスペクタは、リフレッシュするまでCSS表示をトリガしているようです。

あなたのコード(doctypeも追加した場合)は、かなり良いテストケースと思われます。このバグが既にbugs.webkit.orgにない場合は、このコードを送信することができます。

*編集OK私は間違いなくJavascriptをオンにしていますが、これは私が元々意図していた答えではなく、コメントにする能力をまだ見ていません。

+0

あなたは自分の質問や回答に常にコメントすることができますが、他の人のコメントには50人以上の人が必要です。 – Skuld

+0

Skuld、ありがとう。私はよくある質問を見ていたはずです。 :) – stommepoes

+0

いいえ心配:)私たちは一度新しいものでした。これはTBH以外にも、これはコメントよりも答えがあり、それにあなたにいくつかの担当者がいます:) – Skuld

0

私は同じ問題を抱えていると私は、この回避策を見つけた:

http://jsfiddle.net/ZxAnH/

section { 
    height: 0; 
    overflow: none; 
} 
section:only-child { 
    height: auto; 
} 

これは、要素の余白を非表示にしないだろうが、ラッパーとして、いくつかの要素を隠すために十分である可能性があります。別の回避策を見つけましたか?

関連する問題