Question

我正在尝试在我的网站上使用短信聊天气泡，但我无法让它们显示在Android手机或平板电脑上。我有一些不同的CSS示例，但它们似乎都不适用于Android。

＆＃13;

.bubble {
  background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.25, rgb(210,244,254)),
    color-stop(1, rgb(149,194,253))
  );
  border: solid 1px rgba(0, 0, 0, 0.5);
  /* vendor rules */
  border-radius: 20px;
  /* vendor rules */
  box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
  /* vendor rules */
  box-sizing: border-box;
  clear: both;
  float: left;
  margin-bottom: 20px;
  padding: 8px 30px;
  position: relative;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
  width: auto;
  max-width: 100%;
  word-wrap: break-word;
}

.bubble:before, .bubble:after {
  border-radius: 20px / 10px;
  content: '';
  display: block;
  position: absolute;
}

.bubble:before {
  border: 10px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: -7px;
  z-index: -2;
}

.bubble:after {
  border: 8px solid transparent;
  border-bottom-color: #d2f4fe;
  bottom: 1px;
  left: -5px;
}

/*ALT BUBBLE*/
.bubble-alt {
  background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.25, rgb(172,228,75)),
    color-stop(1, rgb(122,205,71))
  );
  border: solid 1px rgba(0, 0, 0, 0.5);
  /* vendor rules */
  border-radius: 20px;
  /* vendor rules */
  box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
  /* vendor rules */
  box-sizing: border-box;
  clear: both;
  float: right;
  margin-bottom: 20px;
  padding: 8px 30px;
  position: relative;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
  width: auto;
  max-width: 100%;
  word-wrap: break-word;
}

.bubble-alt:before, .bubble-alt:after {
  border-radius: 20px / 10px;
  content: '';
  display: block;
  position: absolute;
}

.bubble-alt:before {
  border: 10px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  right: -7px;
  z-index: -2;
}

.bubble-alt:after {
  border: 8px solid transparent;
  border-bottom-color: #ace44b;
  bottom: 1px;
  right: -5px;
}

.bubble2{
  background-color: #F2F2F2;
  border-radius: 5px;
  box-shadow: 0 0 6px #B2B2B2;
  display: inline-block;
  padding: 10px 18px;
  position: relative;
  vertical-align: top;
}

.bubble2::before {
  background-color: #F2F2F2;
  content: "\00a0";
  display: block;
  height: 16px;
  position: absolute;
  top: 11px;
  transform:             rotate( 29deg ) skew( -35deg );
  -moz-transform:    rotate( 29deg ) skew( -35deg );
  -ms-transform:     rotate( 29deg ) skew( -35deg );
  -o-transform:      rotate( 29deg ) skew( -35deg );
  -webkit-transform: rotate( 29deg ) skew( -35deg );
  width:  20px;
}

.me {
  float: left;   
  margin: 5px 45px 5px 20px;         
}

.me::before {
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  left: -9px;           
}

.you {
  float: right;    
  margin: 5px 20px 5px 45px;         
}

.you::before {
  box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
  right: -9px;    
}

.popover-example .popover {
  position: relative;
  display: block;
  margin: 20px;
}

＆＃13;

<div class="bubble2 me">Bubble 1</div>
<div class="bubble2 you">Bubble 2</div>
<div class="bubble">Bubble 1</div>
<div class="bubble-alt">Bubble 2</div>

<div class="popover-example">
  <div class="popover right">
    <div class="arrow"></div>
    <h3 class="popover-title">Popover top</h3>
    <div class="popover-content">
      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
  </div>
</div>

＆＃13;

所有这些都来自PC和IPAD，但不是Android。你能告诉我是什么让这些不兼容并帮我纠正它们以供Android使用吗？谢谢！

Answer 1

好的，我删除了其他一些CSS，它开始工作了。所以显然存在一些我不明白的冲突。但它现在正在运作，以便你！

css气泡不会显示在Android

1 个答案: