-1

我使用 css3 方法来绘制语音气泡。

有时，当我加载我的网站时，语音气泡会被取代。

见http://cl.ly/image/1A0Y3z401D23

然后我必须按几次刷新按钮才能以正确的方式呈现。

见http://cl.ly/image/3V043M1K1l0n

注意：没有成功或失败的标记。它始终是相同的标记。

我用chrome对此进行了测试，它经常发生。您可以在此处查看公共页面之一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

浮动.bot50x50并.talkbubble离开并摆脱所有position: relative;样式，除非绝对需要。

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

于 2012-10-18T00:33:42.403 回答