转发器内的语音泡沫

Question

上面是我将.speech_bubble_content的bg颜色更改为红色时渲染的css的图像。气泡无法正常显示。

我使用以下代码从数据库中检索数据并将其绑定到转发器。我也在使用css在我想要显示的内容周围显示一个语音气泡。我注意到当我放置div的标签时显示数据 - 当标签位于div内时没有检索到任何内容 - 在这种情况下显示创建日期，但是省略了故事。为什么会这样？谢谢你的帮助。我相信这是由css引起的。

<asp:Repeater ID="Repeater1" runat="server">

   <ItemTemplate>

    <div class="speech_bubble">
    <b class="sb1"></b><b class="sb2"></b><b class="sb3"></b><b class="sb4"></b><b class="sb5"></b><b class="sb6"></b><b class="sb7"></b>
    <div class="speech_bubble_content">
    <p>

    <asp:Label ID="story" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Story") %>'></asp:Label>


    </p>

    </div>
    <b class="sb7"></b><b class="sb6"></b><b class="sb5"></b><b class="sb4"></b><b class="sb3"></b><b class="sb2"></b><b class="sb1"></b>
    <em></em><span></span>
    </div>
    <asp:Label ID="user" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CompanyRole") %>'></asp:Label>&nbsp;<asp:Label ID="date" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CreationDate") %>'></asp:Label>

    </ItemTemplate>
   </asp:Repeater>

这是CSS：

.speech_bubble{
background: transparent;
margin:10px 0;
}
.speech_bubble_content{
display:block; 
background:#fff; 
border:3px solid #ddd; 
border-width:0 3px;
}
.speech_bubble p{
padding:0.5em 0; 
color:#000;
margin:0 15px; 
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6, .sb7{
display:block; 
overflow:hidden; 
font-size:0;
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6{
height:1px;
}
.sb4, .sb5, .sb6, .sb7{
background:#fff; 
border-left:1px solid #ddd; 
border-right:1px solid #ddd;
}
.sb1 {margin:0 8px; background:#ddd;}
.sb2 {margin:0 6px; background:#ddd;}
.sb3 {margin:0 4px; background:#ddd;}
.sb4 {margin:0 3px; background:#fff; border-width:0 5px;}
.sb5 {margin:0 2px; background:#fff; border-width:0 4px;}
.sb6 {margin:0 2px; background:#fff; border-width:0 3px;} 
.sb7 {margin:0 1px; background:#fff; border-width:0 3px; height:2px;} 

.speech_bubble em{
display:block; 
width:0; 
height:0; 
overflow:hidden; 
border-top:12px solid #ddd; 
border-left:12px dotted transparent; 
border-right:12px dotted transparent; 
margin-left:50px;
}
.speech_bubble span{
display:block; 
width:0; 
height:0; 
overflow:hidden; 
border-top:10px solid #fff; 
border-left:10px dotted transparent; 
border-right:10px dotted transparent; 
margin-left:52px; 
margin-top:-15px;
}

Answer 1

是的，正如勒内建议的那样。查看源代码，HTML将其复制并将CSS保存到http://jsbin.com/并将链接发送回此处，以便我们可以看到.NET生成的REAL html。

你可能也想要

<%#DataBinder.Eval(Container.DataItem, "Story") %>

而不是使用asp：标签，因为它会添加不需要的HTML标记。