泡泡（聊天）框css3

Question

我正在为我的网站创建一个聊天框。我在其中使用css3来创建消息设计。 我在使用firefox进行设计时遇到了问题，它在chrome中运行良好。

这是图像 -

FireFox浏览器：

Chrome浏览器

Ans my css

.chat 
 {
position: relative;
max-width: 240px;
padding: 3px;
background: #fff;
border: #D1D2D4 solid 4px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 7px;
margin-left: 15px;
float:left;
display: inline-block;
word-wrap: break-word;
white-space: pre-wrap;
 }

.chat:after 
{
content: "";
position: absolute;
top: 6px;
left: -7px;
border-style: solid;
border-width: 5px 7px 5px 0;
border-color: transparent #fff;
display: block;
width: 0;
  }

.chat:before 
 {
content: "";
position: absolute;
top: 2px;
left: -12px;
border-style: solid;
border-width: 8px 11px 8px 0;
border-color: transparent #D1D2D4;
display: block;
width: 0;
z-index: 0;
 }

我需要Chrome设计，它应该适用于所有主流浏览器。帮助我为所有浏览器兼容的设计创建css。

Answer 1

将height:0添加到:before和:after

Working fiddle