Question

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

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

请参阅http://cl.ly/image/1A0Y3z401D23

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

请参阅http://cl.ly/image/3V043M1K1l0n

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

我用镀铬测试了它，它经常发生。您可以在此处查看其中一个公开页面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或任何其他内容。

Answer 1

除非绝对需要，否则

float .bot50x50和.talkbubble都会离开并删除所有position: relative;样式。

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

为什么我的css演讲泡沫如此频繁地流离失所？我怎么能阻止这个？

1 个答案: