html - 为什么聊天气泡箭头在旧浏览器上没有正确对齐

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 中得到了如下图所示的输出

但在 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>