Question

这是我的第一个问题，对不起，如果我做错了。

我正在尝试创建一个根据参数动态“填充”的圆角按钮。我在按钮内创建了一个内部div，绝对位于底部。它在chrome webview上运行得很完美，但我无法在android 4.1上运行。

这是它的外观： right 这就是它在android 4.1上的样子： wrong 这是我的代码：

<div class="col" style="padding:0px; margin: 0px; text-align:center; height:100%">
  <a  style="overflow:hidden; padding: 0px; height:125px; width:125px; border-radius: 50%; border-width:2px; background-color:rgba(255,255,255,0.0001); z-index: 2" class="button likebuttons" ng-click="voteClick(1, vote.id, thread.id) " ng-class="{'button-dislike':var==1}">
    <img style="margin:27px ; vertical-align:middle; position:relative; z-index: 1 ; width:60%; height:60%" src="img/thumbs-down.png" align="middle"></img>
    <div style="-webkit-transition: all 0.9s ease-in; height:{{(thread.get('ratio'))*100}}%; position:absolute; bottom:0; width: 100%;background-color:#db0000"></div>
  </a> </div>

“button”类是position：relative，其他类只是添加不同的边框颜色。

我尝试了一切我找不到的东西......

谢谢！

Answer 1

您需要更改<a>的块格式化上下文并将其设置为相对位置：

<div class="col" style="padding:0px; margin: 0px; text-align:center; height:100%">
  <a style="display:inline-block;position:relative;overflow:hidden; padding: 0px; height:125px; width:125px; border-radius: 50%; border-width:2px;border:solid; background-color:rgba(255,255,255,0.0001); z-index: 2" class="button likebuttons" ng-click="voteClick(1, vote.id, thread.id) "
  ng-class="{'button-dislike':var==1}">
    <img style="margin:27px ; vertical-align:middle; position:relative; z-index: 1 ; width:60%; height:60%" src="img/thumbs-down.png" align="middle"></img>
    <div style="transition: all 0.9s ease-in; height:62.5%; position:absolute; bottom:0; width: 100%;background-color:#db0000"></div>
  </a>
</div>

补充道：

a {
display:inline-block;
position:relative;
}

不介意不再需要webkit前缀或使用最后的非前缀规则（转换）

溢出：隐藏在位置：相对/绝对解决方法android 4.1

1 个答案: