-1

css3 メソッドを使用して吹き出しを描画しました。

時々、ウェブサイトをロードすると吹き出しが移動します。

http://cl.ly/image/1A0Y3z401D23を参照

次に、適切な方法でレンダリングされる前に、更新ボタンを数回押す必要があります。

http://cl.ly/image/3V043M1K1l0nを参照

注: マークアップの成功または失敗はありません。ずっと同じマークアップです。

これをクロムでテストしましたが、かなり頻繁に発生します。ここで公開ページの 1 つを表示できますhttp://storyzer.com/faq

**編集**

コードを表示するためにコメントが必要だったため、このコードを追加しています。

吹き出しの描画を担当する css コード

/******** talkbubble_left **************/
.gradient_header_talkbubble {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f8f8f9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f8f8f9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#f8f8f9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#f8f8f9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#f8f8f9 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%,#f8f8f9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f9',GradientType=0 ); /* IE6-9 */
}
.talkbubble_left {
    position: relative;
    background: #white;
    border: 1px solid #DCDDDE;
}
.talkbubble_left:after, .talkbubble_left:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    top: 50%;
}
.talkbubble_left:after {
    border-top: 5px solid transparent;
    border-right: 10px solid #FBFBFB;
    border-bottom: 5px solid transparent;
    margin-top: -5px;
}
.talkbubble_left:before {
    border-top: 6px solid transparent;
    border-right: 11px solid #DCDDDE;
    border-bottom: 6px solid transparent;
    margin-top: -6px;
}

#header .talkbubble{
    display: inline-block;
    position: relative;
    top: 10px; left: 0; right: 0; bottom: 0;
    height: 47px;   
    width: 889px;
    float: right;   
}

コードを使用してこれを防ぐにはどうすればよいですか? javascript、css、html、または何でもかまいません。

4

1 に答える 1

1

float.bot50x50と.talkbubbleleft の両方を使用して、position: relative;どうしても必要な場合を除き、すべてのスタイルを削除します。

http://www.quirksmode.org/css/clearing.html

于 2012-10-18T00:33:42.403 に答える