气泡（聊天）框 css3

Question

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

这是图片--

FireFox 浏览器：

Chrome 浏览器

回答我的 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