html - 设备上的 CSS 与浏览器不同

Question

我正在使用 Ionic2 并且有一个包含消息的应用程序。该消息在浏览器中看起来如下:

但是，在 Android 或 iOS 设备上运行时，它看起来如下:

如您所见，每条消息的尾部都丢失了。

问题

如果有人可以建议我如何使样式保持一致并在所有设备上显示尾部？

HTML

<ion-content padding class="messages-page-content">
    <ion-list class="message-list">
      <ion-item class="message-item" *ngFor="let item of firelist | async">
        <div [ngClass]="{'message message-me':(item.memberId1 == me.uid)}">
          <div [ngClass]="{'message message-you':(item.memberId1 == you.uid)}">
            <div class="message-content">{{item.message_text}}</div>
            <span class="time-tick">
                        <span class="message-timestamp-date">{{item.timestamp | amDateFormat: 'D MMM YY'}}</span>
            <span class="message-timestamp">{{item.timestamp | amDateFormat: 'h:mm a'}}</span>
            <div *ngIf="item.memberId1 === me.uid && item.readByReceiver === true">
              <span class="checkmark">
                                <div class="checkmark_stem"></div>
                                <div class="checkmark_kick"></div>
                            </span>
            </div>
            </span>
          </div>
        </div>
      </ion-item>
    </ion-list>
</ion-content>

CSS

参见:background-image: url(/assets/message-me.png); 和 background-image: url(/assets/message-you.png);

.title-timestamp {
  font-size: 11px;
  color: gray;
}

.message-item {
  background-color: transparent;
}

.label {
    overflow: visible;
    white-space: normal;
}

.message-send {
  font-size: 3.2em;
}

.input-wrapper {
    overflow: visible;
}

.item-md.item-block .item-inner {
  padding-left: 8px;
}

.messages-page-navbar {
  .chat-picture {
    width: 50px;
    border-radius: 50%;
    float: left;
  }

  .chat-title {
    line-height: 27px;
    display: inline-block;
  }

  .chat-subtitle {
    font-size: 11px;
    padding: 0px;
  }
}

.messages-page-content {
  > scroll-content {
    padding: 0;
  }

  .message-list {
    background-color: #E0DAD6;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .message-wrapper {
    margin-bottom: 9px;

    &::after {
      content: "";
      display: table;
      clear: both;
    }
  }

  .message {
    display: inline-block;
    position: relative;
    max-width: 236px;
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);

    &.message-me {
      float: right;
      background-color: #effeff;

      &::before {
        right: -11px;
        background-image: url(/assets/message-me.png);
      }
    }

    &.message-you {
      float: left;
      background-color: #FFF;

      &::before {
        left: -11px;
        background-image: url(/assets/message-you.png);
      }
    }

    &.message-you::before, &.message-me::before {
      content: "";
      position: absolute;
      bottom: 3px;
      width: 12px;
      height: 19px;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: contain;
    }

    .message-content {
      padding: 5px 7px;
      word-wrap: break-word;

      &::after {
        content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
        display: inline;
      }
    }

    .message-timestamp {
      position: absolute;
      bottom: 2px;
      right: 17px;
      font-size: 11px;
      color: gray;
    }

    .message-timestamp-date {
      position: relative;
      bottom: 2px;
      right: -6px;
      font-size: 9px;
      color: gray;
    }
  }
}

.message-datetime {
    font-size: 11px;
    color: grey;
}

.messages-page-footer {
  padding-right: 0;

  .message-editor {
    margin-left: 2px;
    padding-left: 5px;
    background: white;
    border-radius: 3px;
  }

  .message-editor-button {
    background: color($colors, primary);
    box-shadow: none;
    width: 50px;
    height: 50px;
    font-size: 17px;
    margin: auto;
  }
}

.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    position: absolute;
    bottom: 2px;
    right: 1px;
}

.checkmark_stem {
    position: absolute;
    width:2px;
    height:9px;
    background-color:#3BB9FF;
    left:15px;
    top:6px;
}

.checkmark_kick {
    position: absolute;
    width:2px;
    height:3px;
    background-color:#3BB9FF;
    left:13px;
    top:12px;
}

.time-tick {
  display:inline-block;
}

更新

感谢下面的建议，我添加以下内容:

CSS

  .tail-me {
    background-image: url(/assets/message-me.png);
    background-repeat: no-repeat;
    bottom: 0;
    right: -11px
  }

  .tail-you {
    background-image: url(/assets/message-you.png);
    background-repeat: no-repeat;
    bottom: 0;
    left: -11px
  }

HTML

<ion-item class="message-item tail-me" *ngFor="let item of firelist | async">

它在浏览器中显示:

如您所见，尾部的位置不对。如果我做出 position: absolute，它会完全抛出消息。 left 和 bottom css 属性移动消息气泡。所以我猜我将 tail-me 放在了 html 中的错误标签上。有什么想法吗？

在 iOS 和 Android 设备上，它仍然不显示尾部:

Answer 1

Android 和 iOS 版本似乎无法正确处理伪元素。我会尝试另一种方法，例如创建一个放置在 .message-me 和 .message-you 中的类元素。

将该类元素附加到每个消息框，并为其添加绝对定位，以便:

.tail-me {
    background-image: url(/assets/message-me.png);
    position: absolute;
    bottom: 0;
    right: -11px
}

和

.tail-you {
    background-image: url(/assets/message-you.png);
    position: absolute;
    bottom: 0;
    left: -11px
}

相对定位元素(您的 .message)内的绝对定位元素将被放置在该相对定位元素内。