为什么chatbubble箭头在旧浏览器上无法正确匹配

Question

我目前正在尝试创建一个聊天气泡箭头，该箭头可以在所有最新的浏览器上使用，但是在xullrunner上却无法正常运行

CSS：

.speech-wrapper{
  padding: 5px 10px;
  }
.chatbox {
  padding: 5px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top:3px;   
  background: #c7edfc;
  color: #000;
  position: relative;
  border-radius: 4px;  
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}
.timestamp{
        font-size: 11px;
        position: absolute;
        bottom: 8px;
        right: 10px;
        text-transform: uppercase; color: #999
      }
/* speech bubble 13 */
      .name{
        font-weight: 600;
        font-size: 12px;
        margin: 0 0 4px;
        color: #3498db;
      }
        .bubble-arrow {
      position: absolute;
      width: 0;
      bottom:42px;
      left: -19px;
      height: 0;

    }

    .bubble-arrow:after {
      content: "";
      position: absolute;
      border: 0 solid transparent;
      border-top: 9px solid #c7edfc;
      border-radius: 0 20px 0;
      width: 15px;
      height: 30px;
      transform:rotate(145deg);

    }

HTML：

<div class="speech-wrapper"><div class="chatbox"><div><p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span>
  <div class="bubble-arrow"></div>
  </div></div>

我运行上面的代码在所有最近的Bowser中都输出了imag，如下图

但是在xullrunner上，转换似乎失败了，它给了我下面的输出结果

此处箭头未正确旋转，并给我错误的输出结果

编辑 在尝试了答案提出的解决方案后，我在箭头上看到一条线，如下图所示

Answer 1

您可以在此处尝试以下代码：

.speech-wrapper{
  padding: 5px 10px;
  }
.chatbox {
  padding: 5px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top:3px;   
  background: #c7edfc;
  color: #000;
  position: relative;
  border-radius: 4px;  
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}
.timestamp{
        font-size: 11px;
        position: absolute;
        bottom: 8px;
        right: 10px;
        text-transform: uppercase; color: #999
      }
/* speech bubble 13 */
      .name{
        font-weight: 600;
        font-size: 12px;
        margin: 0 0 4px;
        color: #3498db;
      }
        .bubble-arrow {
      position: absolute;
      width: 0;
      bottom:42px;
      left: -19px;
      height: 0;

    }

    .bubble-arrow:after {
      content: "";
      position: absolute;
      left: 2px;
      border: 9px solid transparent;
      border-color: transparent  #c7edfc transparent transparent;
 

    }

<div class="speech-wrapper"><div class="chatbox"><div><p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span>
  <div class="bubble-arrow"></div>
  </div></div>